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;//添加图像srcimage.onload = function(){//图像数据加载完成canvas = convertImageToCanvas(image);//image转canvasdataUrl = 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来进行数据传输，然后返回一个图片在服务器的路径。