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

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.