利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解


Posted in Javascript onNovember 20, 2017

将图片转为base64的好处

将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。

将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。

引言

假设一个应用场景:由于某些特殊原因从服务端请求到图片路径,要求通过该路径获取对应图片的 base64 dataURL。在这个场景中,我们首先推断该图片路径是可访问的,同时还需要一种将图片转换到 dataURL 的方法。

我们如何实现它呢?

dataURL

先大致回顾下正统的 dataURL 的语法,这有助于我们检验转换后的内容是否正确。一个完整的 dataURI 应该是这样的:

data:[<mediatype>][;base64],<data>

其中mediatype声明了文件类型,遵循MIME规则,如“image/png”、“text/plain”;之后是编码类型,这里我们只涉及 base64;紧接着就是文件编码后的内容了。我们常常在 HTML 里看到img标签的src会这样写:

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

这个img引用的就是以 base64 编码的 dataURL 了,只要浏览器支持,就可以被解码成 gif 图片并渲染出来。

.toDataURL()

FileReader对象也有类似的方法,比如.readAsDataURL() ,然而它只接受file或blob类型,而这两种类型一般只能通过<input[type=file]>元素的files属性获取,或者用Blob()构造函数手工创建一个新的对象。尴尬的是我们当前只有图片路径,受制于浏览器的安全策略, <input[type=file]>的files属性是只读的,而Blob()构造函数只接受文件内容,两种方式都无法通过图片路径直接获取。上文中假设的应用场景迫使我们必先考虑如何通过路径获取到图片内容。<img>是可以的,并且可以被绘制到<canvas>中,而<canvas>正巧拥有.toDataURL()方法。

万事具备,我们只需要把<img>获取到的图片放到<canvas>里再通过.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 来实现,再添加一些错误处理就更完美了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
jQuery侧边栏实现代码
May 06 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
Node.js 中使用 async 函数的方法
Nov 20 #Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 #Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 #Javascript
使用DataTable插件实现异步加载数据
Nov 19 #Javascript
原生JavaScript实现Ajax异步请求
Nov 19 #Javascript
gulp安装以及打包合并的方法教程
Nov 19 #Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 #Javascript
You might like
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
出纳岗位职责
2013/11/09 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
施工安全标语
2014/06/07 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
信访稳定工作汇报
2014/10/27 职场文书
文明倡议书
2015/01/19 职场文书
画展邀请函
2015/01/31 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python