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都不会被调用了，此时直接进行处理即可