JS 图片转base64编码实现及相关问题

1、JS图片转base64编码实现

function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null; 
    };
	img.onerror = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null; 
    };
    img.src = url;
	if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数     
		canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null; 
      return; // 直接返回，不用再处理onload事件     
	}    
}

2、代码分析

1）上述中的onload会在图片加载成功后调用

2）上述的onerror会在图片地址为无效地址的时候，即图片加载失败后调用

3）img.complete用于如果浏览器缓存了图片，则这个值true，onload、onerror都不会被调用了，此时直接进行处理即可