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代替；

  扫描二维码关注公众号，回复： 3256592 查看本文章

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在线转换