.toDataURL()
方法转化下,就可以得到以 base64 编码的 dataURL。来看这个方法的语法:
canvas.toDataURL([type, encoderOptions]);
canvas是DOM元素<canvas>对象;参数type指定图片类型,如果指定的类型不被支持则以默认值image/png替代;encoderOptions可以为image/jpeg或image/webp类型的图片设置图片质量,取值0-1,超出则以默认值0.92替代。
需要注意的是:在转换成 dataURL 前必须先确保图片成功加载到,于是.toDataURL()
方法应该写在<img>的onload异步事件中。现在就来实现一个功能函数:
function getBase64(url){ //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染 var Img = new Image(), dataURL=''; Img.src=url; Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件 var canvas = document.createElement("canvas"), //创建canvas元素 width=Img.width, //确保canvas的尺寸和图片一样 height=Img.height; canvas.width=width; canvas.height=height; canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中 dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL }; }
一个可供随时调用的转换函数完成了,它会在图片被加载后返回一整个 dataURL 字符串。
完善
onload事件确保了转换任务在加载后执行,却又带来了新问题——dataURL 只有在图片加载完成后才会返回,我们无法确定图片什么时候完成加载。如果后续要对 dataURL 做相关处理(比如传递到其他服务器)的话,添加一个回调是必要的,这能确保后续处理任务在成功得到 dataURL 之后执行,我们需要修改getBase64()
:
function getBase64(url,callback){ //添加一个回调参数 ... Img.onload=function(){ ... canvas.getContext("2d").drawImage(Img,0,0,width,height); dataURL=canvas.toDataURL('image/jpeg'); callback?callback(dataURL):null; //调用回调函数 }; }
在执行时添加回调:
getBase64('//upload.jianshu.io/users/upload_avatars/555630/fdd1b798e6b0.jpg',(dataURL)=>{ console.log(dataURL); });
就是这样,如果不考虑兼容性的话,或许我们可以用 promise 和 generator 来实现,再添加一些错误处理就更完美了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对黑区网络的支持。