js產生縮圖後上傳並利用canvas重繪_javascript技巧

一般在處理圖片上傳時，通常的邏輯都是將來源圖片上傳到伺服器端，再由伺服器端的語言進行縮放大小的操作。

此種模式一般可以滿足大部分的需求，但當我們所需要的圖片僅僅是一個符合規定大小的源圖片的縮圖，再使用此種模式，將是一種浪費服務端資源以及頻寬的方式，故我們考慮在瀏覽器端產生小圖後再進行上傳操作。

//以下為原始碼

複製程式碼 程式碼如下:

function drawCanvasImage(obj,width, callback){

var $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; }
}else{
var target_w = img.width;
var target_h = img.height;
}
var target_h = img.height;
}
$canvas[0 ].width = target_w;
$canvas[0].height = target_h;

context.drawImage(img,0,0,target_w,target_h);

_can🎜>_can = 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;
}

re . value;
}
}
函數getFullPath為取得選取的圖片的位址。 _canvas取得的是base64編碼的圖片編碼，將其傳輸到後端寫入檔案即可。