base64字符串和file文件互转

最近项目刚好用到,网上查阅整理下:

	//将base64转换为文件对象
	$base64ToFiles(dataurl, filename = 'file') {
	  let arr = dataurl.split(',')
	  let mime = arr[0].match(/:(.*?);/)[1]
	  let suffix = mime.split('/')[1]
	  let bstr = atob(arr[1])
	  let n = bstr.length
	  let u8arr = new Uint8Array(n)
	  while (n--) {
		u8arr[n] = bstr.charCodeAt(n)
	  }
	  //转换成file对象
	  return new File([u8arr], `${filename}.${suffix}`, {
		type: mime
	  })
	  //转换成成blob对象
      //return new Blob([u8arr],{type:mime});
	},
	//将图片转换为Base64 
    //url 图片链接或者是blob对象,callback 回调函数
    $getImgToBase64(url,callback){
		  let canvas = document.createElement('canvas');
		  let ctx = canvas.getContext('2d');
		  //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比    createElement() 创建 <img> 省去了 append(),也就避免文档冗余和污染
		  let img = new Image;
		  img.crossOrigin = 'Anonymous';
		  //要先确保图片完整获取到,这是个异步事件
		  img.onload = function(){
		    canvas.height = img.height;//确保canvas的尺寸和图片一样
		    canvas.width = img.width;
		    ctx.drawImage(img,0,0);//将图片绘制到canvas中
		    let dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的
		    callback(dataURL);//调用回调函数
		    canvas = null;
		  };
		  img.src = url;
		},
    // 将base64转换为Blob文件  (分片上传用blob)
	$convertBase64UrlToBlob(urlData) {
		let bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
		//处理异常,将ascii码小于0的转换为大于0
		let ab = new ArrayBuffer(bytes.length);
		let ia = new Uint8Array(ab);
		for (var i = 0; i < bytes.length; i++) {
			ia[i] = bytes.charCodeAt(i);
		}
		return new Blob([ab], {type:'image/png'});
	},
	// 将blob转换为file文件
	   //type事例 type:'image/png'
	$blobToFiles(blob, {name,type}) {
		return new window.File([blob], name, {type: type})
	}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值