js生成缩略图后上传（利用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编码的图片编码，将其传输到后端写入文件即可。