html5 canvas 加载图片URL并转换成base64

最新推荐文章于 2024-07-27 12:52:14 发布

_iorilan

最新推荐文章于 2024-07-27 12:52:14 发布

阅读量5.1k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/lan_liang/article/details/78571307

版权

Javascript 专栏收录该内容

114 篇文章 1 订阅

订阅专栏

异步加载图片到canvas并拿掉data:image;base64部分。

    function convertImgToBase64(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        dataURL = dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}


convertImgToBase64(imgQrCode.src, function(base64Img){
        console.log('base64 :',base64Img);
    });