本文主要给大家介绍了关于利用canvas中toDataURL()将图片转为dataURL(base64)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧，希望能帮助到大家。
将图片转为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类型，而这两种类型一般只能通过是可以的，并且可以被绘制到
万事具备，我们只需要把获取到的图片放到
canvas.toDataURL([type, encoderOptions]);
canvas是DOM元素
需要注意的是：在转换成 dataURL 前必须先确保图片成功加载到，于是.toDataURL()方法应该写在的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 来实现，再添加一些错误处理就更完美了。
相关推荐：
jquery插件canvaspercent.js实现百分比圆饼效果实例分享
以上是canvas中toDataURL()将图片转为dataURL(base64)的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
