js生成縮略圖后上傳并利用canvas重繪
更新時間:2014年05月15日 10:51:57 作者:
這篇文章主要介紹了js生成縮略圖后上傳,利用canvas重繪,需要的朋友可以參考下
一般在處理圖片上傳時,通常的邏輯都是將源圖片上傳到服務器端,再由服務器端的語言進行縮放大小的操作。
此種模式一般可以滿足大部分的需求,但當我們所需要的圖片僅僅是一個符合規(guī)定大小的源圖片的縮略圖,再使用此種模式,將是一種浪費服務端資源以及帶寬的方式,故我們考慮在瀏覽器端生成小圖后再進行上傳操作。
//以下為源代碼
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ī)定大小的源圖片的縮略圖,再使用此種模式,將是一種浪費服務端資源以及帶寬的方式,故我們考慮在瀏覽器端生成小圖后再進行上傳操作。
//以下為源代碼
復制代碼 代碼如下:
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ù)胶蠖藢懭胛募纯伞?
相關文章
JavaScript實現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實例
這篇文章主要介紹了JavaScript實現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實例,LokiJS是一個內(nèi)存數(shù)據(jù)庫,將性能考慮放在第一位,使用JavaScript編寫,需要的朋友可以參考下2014-11-11js構造函數(shù)創(chuàng)建對象是否加new問題
本篇文章主要給大家詳細分析了js構造函數(shù)創(chuàng)建對象加new與不加new的問題,有這方面興趣的參考學習下。2018-01-01