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

此種模式一般可以滿足大部分的需求，但當(dāng)我們所需要的圖片僅僅是一個符合規(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; 
} 
} 

函數(shù)getFullPath為獲取選中的圖片的地址。

_canvas獲取到的是base64編碼的圖片編碼，將其傳輸?shù)胶蠖藢懭胛募纯伞?

您可能感興趣的文章:

相關(guān)文章

Nuxt配置Element-UI按需引入的操作方法
這篇文章主要介紹了Nuxt配置Element-UI按需引入方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-07-07
JavaScript實(shí)現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實(shí)例,LokiJS是一個內(nèi)存數(shù)據(jù)庫,將性能考慮放在第一位,使用JavaScript編寫,需要的朋友可以參考下
2014-11-11
使用canvas實(shí)現(xiàn)魔法攝像頭的示例代碼
我們用手機(jī)的攝像頭自拍,很容易實(shí)現(xiàn)簡單的自拍效果,如復(fù)古、黑白等等,其實(shí)我們使用web端的JavaScript也是可以實(shí)現(xiàn)的,接下來就帶領(lǐng)小伙伴實(shí)現(xiàn)一個魔法攝像頭,并且提供了截圖下載功能,需要的朋友可以參考下
2023-08-08
html數(shù)組字符串拼接的最快方法
html字符串的連接方法有多種，但效率卻有很大區(qū)別，大家可以感覺需要選擇。
2009-09-09
js構(gòu)造函數(shù)創(chuàng)建對象是否加new問題
本篇文章主要給大家詳細(xì)分析了js構(gòu)造函數(shù)創(chuàng)建對象加new與不加new的問題，有這方面興趣的參考學(xué)習(xí)下。
2018-01-01
微信小程序引用iconfont圖標(biāo)的方法
這篇文章主要介紹了微信小程序引用iconfont圖標(biāo)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-10-10
js在瀏覽器中的event loop事件隊(duì)列示例詳解
大家都知道js是單線程的腳本語言,在同一時間只能做同一件事,為了協(xié)調(diào)事件、用戶交互、腳本、UI渲染和網(wǎng)絡(luò)處理等行為,防止主線程阻塞,Event Loop方案應(yīng)運(yùn)而生,這篇文章主要給大家介紹了關(guān)于js在瀏覽器中的event loop事件隊(duì)列的相關(guān)資料,需要的朋友可以參考下
2021-11-11
js與jquery正則驗(yàn)證電子郵箱、手機(jī)號、郵政編碼的方法
這篇文章主要介紹了js與jquery正則驗(yàn)證電子郵箱、手機(jī)號、郵政編碼的方法,涉及javascript與jQuery鼠標(biāo)事件的響應(yīng)與正則驗(yàn)證操作字符串的相關(guān)技巧,需要的朋友可以參考下
2016-07-07
js貪吃蛇游戲?qū)崿F(xiàn)思路和源碼
這篇文章主要為大家介紹了js貪吃蛇游戲?qū)崿F(xiàn)思路，并分享貪吃蛇游戲源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
js結(jié)合正則實(shí)現(xiàn)國內(nèi)手機(jī)號段校驗(yàn)
這篇文章主要介紹了js結(jié)合正則實(shí)現(xiàn)國內(nèi)手機(jī)號段校驗(yàn)的方法以及使用js和jQuery實(shí)現(xiàn)的簡單校驗(yàn)手機(jī)號的示例，非常簡單實(shí)用，有需要的小伙伴可以參考下。
2015-06-06