Größe eines Bildes im Canvas ändern

Question

Ich habe versucht, ein Bild bereits auf der Seite zu erstellen und seine Quelle in die URL eines anderen Bildes zu ändern, das über die FileReader API geladen wurde. Das Ergebnis ist ein leeres Bild, weiß, obwohl die Abmessungen in Ordnung zu sein scheinen. ShowImage() positioniert ein Feld zum Zuschneiden - ein weiteres div und lädt dann die Datei und ruft dann resize() auf. Wie kann ich das Bild anzeigen lassen? Irgendwelche Ideen würden sehr geschätzt werden.

function showImage(files) { 
    var buttons = document.querySelectorAll("button"); 
    buttons[buttons.length - 1].style.display = "none"; 
    var target = document.querySelectorAll("img"); 
    target = target[target.length - 1]; 
    target.className = ""; 
    target.onload = function() { 
     var rect = target.getBoundingClientRect(); 
     var position = { 
      top: rect.top + window.pageYOffset, 
      left: rect.left + window.pageXOffset 
     }; // center cropping box in image 
     box.style.top = (position.top + rect.height/2 - parseInt(box.style.height)/2) + "px"; 
     box.style.left = (position.left + rect.width/2 - parseInt(box.style.width)/2) + "px"; 
    } 
    var fr = new FileReader(); 
    fr.onload = function(e) { 
     target.src = this.result; 
     resize(); 
    }; 
    fr.readAsDataURL(files[0]); 
} 

function resize() { 
    var orgImg = document.querySelectorAll("img"); 
    orgImg = orgImg[orgImg.length - 1]; 
    var canvas1 = document.createElement("canvas"); 
    canvas1.width = orgImg.width/2; 
    canvas1.height = orgImg.height/2; 
    var ctx1 = canvas1.getContext("2d"); 
    ctx1.drawImage(orgImg, 0, 0, orgImg.width/2, orgImg.height/2); 
    orgImg.src = canvas1.toDataURL("image/png"); 
} 

aktualisieren

Demo

Obwohl es lokal laden angenommen hat, also nicht sicher, dass es wie eine Geige arbeiten konnte.

Answer 1

Ihr Code ist voller Fehler, das ist einer der Gründe, warum es nicht funktioniert.

Nach der Korrektur der Fehler ist Ihre Logik fehlerhaft in der Art, wie Sie auf die Bildlade- und Dateiladeereignisse reagieren.

Umbenennung target-image

Ihre Datei Leser die Image-Datei laden und dann setzen die image.src die geladene DataURL. Dann rufst du die Größe an, aber das Bild wurde nicht geladen, und die src beginnt mit dem Laden.

var fr = new FileReader(); 
fr.onload = function(e) { 
    image.src = this.result; 
    resize(); 
}; 
fr.readAsDataURL(files[0]); 

Die Resize muss im image.onload sein, aber stellen Sie die image.src auf den Inhalt der Leinwand Sie die Bildgröße zu verringern verwendet. Dadurch wird das Ereignis image.onload erneut ausgelöst, wodurch das Ereignis resize aufgerufen wird.

So zu beheben entfernen Sie die resize aus dem Dateileser onload und setzen Sie es am Ende der image (aka target) auf laden Funktion. Bevor Sie diese Größenänderung aufrufen, entfernen Sie das Onload-Ereignis aus dem Bild, damit es nicht mehr ausgelöst wird.

sollte Ihr Code aussehen wie

// refactored target to image 
src.addEventListener("change",showImage); // Add event listener here not in HTML 
function showImage() { 
    src.style.display = "none"; // hide the input 
    const image = document.querySelectorAll("img").pop(); // get the image from the page 
    image.onload = function() { // set the onload event 
     const rect = this.getBoundingClientRect(); 
     const pos = { 
      top: rect.top + pageYOffset, 
      left: rect.left + pageXOffset 
     }; 
     const boxSize = box.getBoundingClientRect(); 
     box.style.top = ((pos.top + rect.height/2 - boxSize.height/2) | 0) + "px"; 
     box.style.left = ((pos.left + rect.width/2 - boxSize.width/2) | 0) + "px"; 
     this.onload = undefined; // remove onload event to stop it firing again 
     resize(this); 
    } 
    const fr = new FileReader(); 
    fr.onload = function(e) { image.src = this.result } 
    fr.readAsDataURL(this.files[0]); 
} 

function resize(image) { 
    const canvas = document.createElement("canvas"); 
    const w = canvas.width = (image.width/2) | 0; 
    const h = canvas.height = (image.height/2) | 0; 
    canvas.getContext("2d").drawImage(image, 0, 0, w, h); 
    image.src = canvas.toDataURL(); // "image/png" is the default so not needed as argument 
}