1. 程式人生 > >html5 canvas 載入圖片URL並轉換成base64

html5 canvas 載入圖片URL並轉換成base64

非同步載入圖片到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);
    });