js generiert Miniaturansichten, lädt sie dann hoch und zeichnet sie mithilfe von Canvas_Javascript-Kenntnissen neu-js-Tutorial-php.cn

js generiert Miniaturansichten, lädt sie dann hoch und zeichnet sie mithilfe von Canvas_Javascript-Kenntnissen neu

WBOY

Freigeben： 2016-05-16 16:48:00

Original

1540 Leute haben es durchsucht

Bei der Verarbeitung von Bild-Uploads besteht die übliche Logik im Allgemeinen darin, das Quellbild auf den Server hochzuladen und dann die serverseitige Sprache zum Durchführen des Skalierungsvorgangs zu verwenden.

Dieser Modus kann im Allgemeinen die meisten Anforderungen erfüllen. Wenn das von uns benötigte Bild jedoch nur eine Miniaturansicht des Quellbilds ist, das der angegebenen Größe entspricht, ist die Verwendung dieses Modus eine Verschwendung von Serverressourcen und Bandbreite. Daher überlegen wir, vor dem Hochladen ein kleines Bild auf der Browserseite zu erstellen.

//Das Folgende ist der Quellcode

Kopieren Sie den Code Der Code lautet wie folgt:

 
 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 = img.height; 🎜>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; 
} 

 
Die Funktion getFullPath dient dazu, die Adresse des ausgewählten Bildes abzurufen. 

_canvas erhält die Base64-kodierte Bildkodierung, die an das Backend übertragen und in eine Datei geschrieben werden kann.