全屋定制官网_长春h5建站_一键识图找原图_百度会员登录入口

一、 图片转base64

1. FileReader方式，图片加载完成触发onload

let reader = new FileReader();reader.readAsDataURL(file);reader.onload = (e) => {// base64编码,e.target.result};

2. canvas方式，HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI。可以使用 type 参数指定其类型，默认为 PNG 格式。图片的分辨率为 96dpi。（参考：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL）

//用于创建一个新的 HTMLImageElement 实例，等价于document.createElement('img')。let img =new Image();//图片urlimg.src="img_url";//图片加载完成img.onload=function(){//绘制canvaslet canvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;let context=canvas.getContext("2d");context.drawImage(img,0,0,img.width,img.height);//将canvas内容转换成base64编码let base64=canvas.toDataURL("image/png");}

二、<img src="" /> 可以显示base64编码的图片；为了在<van-uploader>组件中显示图片，需要将base64编码转换成文件

三、base64转文件

1. new File() 方法，可能存在ios系统不兼容问题

//let dataurl="base64编码",filename="文件名称";
base64ImgtoFile(dataurl,filename){const arr = dataurl.split(",");const mime = arr[0].match(/:(.*?);/)[1];const suffix = mime.split("/")[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], `${filename}.${suffix}`, {type: mime,});
}

2. base64转blob，blob转文件

//let dataurl="base64编码",filename="文件名称";
base64ImgtoFile(dataurl,filename){var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,//8 位无符号整型数组u8arr = new Uint8Array(n);while (n--) {//返回字符串中规定索引（下标）处字符的 Unicodeu8arr[n] = bstr.charCodeAt(n);}//转bolblet blob = new Blob([u8arr], { type: mime });//将blob转file//当前文件最后修改日期blob.lastModifiedDate = new Date();blob.name = filename;return blob;
}

最后处理van-uploader 赋值

<van-uploader preview-size="60"  v-model="fileList" reupload max-count="1" :deletable="false" />

//转换好的filelet file= base64ImgtoFile(dataurl);
let url =  window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file);
fileList.splice(0, 1, {content:dataurl ,//base64编码File: file,//转换好的fileisImage: true,url,});