Image转Canvas注意事项

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

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

html：

<input type="file" οnchange="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来进行数据传输，然后返回一个图片在服务器的路径。