Image转Canvas注意事项

在写图像上传的时候，为了要统一图像的格式，所以难免要去将上传的图像进行格式转换。所以这里就要用到canvas来转换。

这里我们要使用FileReader这个js预置对象， 这个对象可以获取到上传的文件数据，具体如下：

html：

<input type="file" onchange="selectImage(this);" />

js：
function selectImage(file){
if(!file.files||!file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){//文件数据加载完成
image = new Image();
image = document.getElementById('image');
image.src = evt.target.result;//添加图像src

image.onload = function(){//图像数据加载完成
canvas = convertImageToCanvas(image);//image转canvas
dataUrl = getDataURL(canvas);//获取图像base64编码字符串

//alert(dataUrl);
$.post( "图片路径返回接口", {data:dataUrl}, function( data ) {
$('#bankAccount').val('http://t.jgz.la/attachment/'+data.target);
//alert(eval(data));
}, "json");
}
}
reader.readAsDataURL(file.files[0]);//显示预览图像

}

function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);

return canvas;
}

在上面的js代码中，要注意的就是selectImage有两个load函数。第一个其实就是等待文件上传完毕，之后执行load函数。但是这里很多人会忽略image是否加载的问题，以为文件加载完成后图像自然也就ok了。其实要生成一个图像也是要等待一段时间，所以也要异步处理。

这样子就可以将所有上传的图像都转为jpeg了，之后根据$.post来进行数据传输，然后返回一个图片在服务器的路径。