前端利用Canvas生成缩略图并上传

前端利用Canvas生成缩略图并上传

通常处理图片上传时，常规做法是将原始图片文件直接发送至服务器，随后由服务器端的脚本语言负责执行图片尺寸的缩放操作。

这种模式虽然能满足大多数场景，但如果目标仅仅是生成符合特定尺寸要求的缩略图，继续采用后端缩放会无谓地消耗服务器计算资源与网络带宽。因此，一种更高效的策略是在浏览器客户端完成小图的生成，随后再执行上传操作。

以下为源代码

 
function drawCanvasImage(obj,width, callback){
var $canvas = $('<canvas></canvas>')，
canvas = $canvas[0]，
context = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
if(width){
if(width > img.width){
var target_w = img.width;
var target_h = img.height;
}else{
var target_w = width;
var target_h = parseInt(target_w/img.width*img.height);
} 
}else{
var target_w = img.width;
var target_h = img.height;
} 
$canvas[0].width = target_w;
$canvas[0].height = target_h;
context.drawImage(img,0,0,target_w,target_h);
_canvas = canvas.toDataURL();
/*console.log(_canvas);*/
callback(obj,_canvas);
} 
img.src = getFullPath(obj);
} 
function getFullPath(obj)
{ 
if(obj)
{ 
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{ 
obj.select();
return document.selection.createRange().text;
} 
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla)
{ 
if(obj.files && window.URL.createObjectURL)
{ 
return window.URL.createObjectURL(obj.files[0]);
} 
return obj.value;
}else if($.browser.safari){
if(window.webkitURL.createObjectURL && obj.files){
return window.webkitURL.createObjectURL(obj.files[0]);
} 
return obj.value;
} 
return obj.value;
} 
} 

函数getFullPath用于获取选中图片的文件路径。

_canvas变量中存储的是经过Base64编码的图片数据，将其发送至后端并写入文件即可完成保存。