canvas学习——toDataURL()方法
toDataURL()方法
1、toDataURL()方法是什么?
toDataURL()是canvas对象的一种方法,用于将canvas对象转换为base64位编码;
2、利用canvas的toDataURL()方法如何将图片转换为base64编码?
通过将图片绘制到canvas中,然后将canvas对象转换为base64编码,从而实现图片转为base64编码;
3、将图片转换为base64位编码有什么好处?
-
将图片转换为base64位编码后,图片会跟随代码(html、css、js)一起请求加载,不会再单独进行请求加载;
-
可以防止由于图片路径错误导致图片加载失败的问题;
4、toDataURL()方法的两个参数:
toDataURL(type, encoderOptions)
-
type
指定转换为base64编码后图片的格式,如:image/png
、image/jpeg
、image/webp
等等,默认为image/png
格式; -
encoderOptions
用于设置转换为base64编码后图片的质量,取值范围为0-1,超出取值范围用默认值0.92代替;
5、利用canvas将图片转换为base64编码:
function imgToBase64(imgSrc, imgType, callback) {
let type = imgType || 'image/png',
dataURL,
img = new Image();
// 允许资源跨域使用
img.setAttribute('crossOrigin', 'anonymous');
img.src = imgSrc;
img.onload = function () {
let imgWidth = img.width,
imgHeight = img.height;
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
dataURL = canvas.toDataURL(type);
console.log(dataURL);
callback && callback(dataURL)
return dataURL
}
}
参考文献:
[1] 用canvas的toDataURL()将图片转为dataURL(base64)
[2] canvas-toDataURL()将图片转为dataURL(base64)
[3] Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
[4] 原生js使用canvas实现图片格式webp/png/jpeg在线转换
版权声明:本文为XuM222222原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。