利用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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
css配合jquery美化 select
Nov 29 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
2021年最新CPU天梯图
2021/03/04 数码科技
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python的re模块应用实例
2014/09/26 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
银行工作检查书范文
2014/01/31 职场文书
施工安全承诺书
2014/05/22 职场文书
离婚财产分配协议书
2014/10/21 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年电工工作总结
2014/11/20 职场文书
蜗居观后感
2015/06/11 职场文书