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/pngimage/jpegimage/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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>