js génère des vignettes, puis les télécharge et les redessine à l'aide des compétences canvas

js génère des vignettes, puis les télécharge et les redessine à l'aide des compétences canvas_javascript

WBOY

Libérer： 2016-05-16 16:48:00

original

1537 Les gens l'ont consulté

Généralement, lors du traitement des téléchargements d'images, la logique habituelle consiste à télécharger l'image source sur le serveur, puis à utiliser le langage côté serveur pour effectuer l'opération de mise à l'échelle.

Ce mode peut généralement répondre à la plupart des besoins, mais lorsque l'image dont nous avons besoin n'est qu'une vignette de l'image source qui répond à la taille spécifiée, alors l'utilisation de ce mode sera un gaspillage de ressources et de bande passante du serveur. nous envisageons donc de générer une petite image côté navigateur avant de la télécharger.

//Ce qui suit est le code source

Copiez le code Le code est le suivant :

 
 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 = 
}else{ 
var target_w = width; 🎜>var target_h = parseInt (target_w/img.width*img.height); 
} 
}else{ 
var target_w = 
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($. navigateur.safari){ 
if(window.webkitURL.createObjectURL && obj.files){ 
return window.webkitURL.createObjectURL(obj.files[0]); 
} 
return obj.value ; 
} 
return obj.value 
} 
} 

 
La fonction getFullPath permet d'obtenir l'adresse de l'image sélectionnée. 

_canvas obtient l'encodage d'image codé en base64, qui peut être transféré vers le backend et écrit dans un fichier.