So trimmen Sie ein Bild in Javascript

Question

Ich habe ein Bild und ich möchte leere Rahmen an der Ecke davon entfernen. Wie kann ich ein Bild in Javascript schneiden? Wird ohne große Bibliotheken besser sein. Irgendeine Idee?

Answer 1

Mit Hilfe eines "CanvasRenderingContext2D" -Objekts (Canvas-Element) können Sie mit Ihrem Bild machen, was immer Sie wollen. Gerade die Leinwand der Größe und die drawImage() -Methode verwenden:

function trimImage(img, posX, posY, recWidth, recHeight) 
{ 
    var canvas = document.createElement('canvas'); 
    canvas.width = recWidth; 
    canvas.height = recHeight; 
    var context = canvas.getContext('2d'); 
    context.drawImage(img, -posX, -posY); 
    img.parentNode.replaceChild(canvas, img); 
} 
window.addEventListener("DOMContentLoaded", function() 
{ 
    var img = document.createElement('img'); 
    img.src = "image.png"; 
    document.body.appendChild(img); 
    img.onload = function() { trimImage(img, 10, 5, img.width - 40, img.height - 80); } 
}); 

Das Canvas-Element ist ein Bild. Wenn Sie ein Image-Tag benötigen, können Sie es mithilfe von toDataURL() zurückschalten, um ein src-Attribut zu erhalten.

img.parentNode.replaceChild(canvas, img); 

mit

var newImg = document.createElement('img'); 
newImg.src = canvas.toDataURL(); 
img.parentNode.replaceChild(newImg, img); 

ersetzen Ich denke, ein neues Bild ist notwendig, ein onload Ereignis Wiederzündungs.