Es gibt Hunderte von Tutorials, wie man ein Bild von drawImage() auf einer Leinwand zuschneiden kann.Crop Canvas/Export html5 Leinwand mit bestimmter Breite und Höhe
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
Allerdings habe ich eine Leinwand, die den Browser des Benutzers füllt. Durch den Export der Leinwand als Bild möchte ich nur einen Bereich von 640px * 480px aus (0 | 0) exportieren.
Problem: Wie kann ich JavaScript sagen, nur 640 * 480 des Canvas für die toDataURL() zu verwenden?
Hier ist, was ich bisher:
$("#submitGraphic").click(function(){
var canvas = document.getElementsByTagName("canvas");
// canvas context
var context = canvas[0].getContext("2d");
// get the current ImageData for the canvas
var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
// store the current globalCompositeOperation
var compositeOperation = context.globalCompositeOperation;
// set to draw behind current content
context.globalCompositeOperation = "destination-over";
//set background color
context.fillStyle = "#FFFFFF";
// draw background/rectangle on entire canvas
context.fillRect(0,0,canvas[0].width,canvas[0].height);
// not working, seems to clear the canvas? browser hangs?
// seems that I can click a white image in the background
/*canvas[0].width = 640;
canvas[0].height = 480;*/
// not working either
/*canvas[0].style.width = '640px';
canvas[0].style.height = '480px';*/
// not working at all
/*context.canvas.width = 640;
context.canvas.height = 480;*/
// write on screen
var img = canvas[0].toDataURL("image/png");
document.write('<a href="'+img+'"><img src="'+img+'"/></a>');
})
PS: Ich will nicht, oder Maßstab, um die Größe, nur Clipping/zum festen Fenster beschneiden. Here Ich lese, dass Sie nur canvas.width und canvas.height angeben - aber das löscht die Leinwand.
Super, funktioniert sehr gut!/Das einzige, was mich irritiert, ist, dass Firefox das Laden der Seite anzeigt (Tab zeigt den Wendekreis), wenn das Bild bereits angezeigt wurde. Ein Klick auf ESC zeigt wyciwyg: // in der URL !? ... "wyciwyg ist ein internes URI-Schema, das verwendet wird, um document.write-Ergebnisseiten darzustellen"/Aber wie auch immer, glücklich, dass Sie mir eine funktionierende Lösung gegeben haben! –
Die Variable "data" wird zugewiesen, aber nie verwendet ... –
noch die Variable compositeOperation –