js生成縮略圖后上傳并利用canvas重繪
更新時間：2014年05月15日 10:51:57 作者：
這篇文章主要介紹了js生成縮略圖后上傳，利用canvas重繪,需要的朋友可以參考下
一般在處理圖片上傳時，通常的邏輯都是將源圖片上傳到服務(wù)器端，再由服務(wù)器端的語言進(jìn)行縮放大小的操作。
此種模式一般可以滿足大部分的需求，但當(dāng)我們所需要的圖片僅僅是一個符合規(guī)定大小的源圖片的縮略圖，再使用此種模式，將是一種浪費(fèi)服務(wù)端資源以及帶寬的方式，故我們考慮在瀏覽器端生成小圖后再進(jìn)行上傳操作。
//以下為源代碼
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ù)胶蠖藢懭胛募纯伞?
此種模式一般可以滿足大部分的需求，但當(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)文章
JavaScript隨機(jī)打亂數(shù)組順序之隨機(jī)洗牌算法
這篇文章主要介紹了JavaScript隨機(jī)打亂數(shù)組順序之隨機(jī)洗牌算法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
本篇文章主要介紹了詳解webpack4升級指南以及從webpack3.x遷移，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
JavaScript中find()和?filter()方法的區(qū)別小結(jié)
js中find和filter方法大家在工作中會經(jīng)常遇到,那么他們有什么區(qū)別呢？這篇文章主要給大家介紹了關(guān)于JavaScript中find()和?filter()方法區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-12-12
在JavaScript中,通常我們不會直接使用`assert`這個詞,因?yàn)镴avaScript標(biāo)準(zhǔn)庫中并沒有直接提供`assert`函數(shù),下面是一個詳細(xì)的示例,展示如何在JavaScript中模擬`assert`函數(shù),并在`if`語句中嵌套使用它來檢查條件,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了微信小程序checkbox組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了微信小程序上傳多圖到服務(wù)器并獲取返回的路徑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
常常會用到的截取字符串substr()、substring()、slice()方法詳解
javascript中給我們提供三個截取字符串的方法,分別是:slice(),substring()和substr()。下面我們對這三個函數(shù)進(jìn)行詳細(xì)說明和比較,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了詳解nuxt 微信公眾號支付遇到的問題與解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
uni-app封裝axios進(jìn)行請求響應(yīng)攔截和token設(shè)置的操作指南
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到 iOS、Android、Web（響應(yīng)式）、以及各種小程序,Axios 是一個基于 Promise 的 HTTP 客戶端,本文我給大家介紹了uni-app封裝axios進(jìn)行請求響應(yīng)攔截和token設(shè)置的操作指南2025-01-01
javascript實(shí)現(xiàn)的listview效果
javascript實(shí)現(xiàn)的listview效果...2007-04-04