js生成縮略圖后上傳并利用canvas重繪

2019-11-20 15:22:03

字體：大中小

供稿：網(wǎng)友

一般在處理圖片上傳時(shí)，通常的邏輯都是將源圖片上傳到服務(wù)器端，再由服務(wù)器端的語(yǔ)言進(jìn)行縮放大小的操作。

此種模式一般可以滿足大部分的需求，但當(dāng)我們所需要的圖片僅僅是一個(gè)符合規(guī)定大小的源圖片的縮略圖，再使用此種模式，將是一種浪費(fèi)服務(wù)端資源以及帶寬的方式，故我們考慮在瀏覽器端生成小圖后再進(jìn)行上傳操作。

//以下為源代碼

復(fù)制代碼代碼如下:

 
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; 
} 
} 