Wie auch immer, Dataurl aus skalierten 2D Kontext zu bekommen?

Question

Ich habe eine Leinwand, die eine unterschiedliche Höhe hat & Breite nach Ansicht-Port-Breite. Jetzt wird das Canvas verwendet, um mit toDataURL ein finales PNG zu erstellen. Aber ich brauche den endgültigen PNG mit einer festen Auflösung. Also muss ich den 2D-Kontext aus der Leinwand vergrößern. Aber wie bekomme ich die Daten aus diesem erweiterten Kontext? Ich werde keine zweite Leinwand verwenden.

* Ultimatives Ziel ist es, eine einzelne Leinwand (ich habe begrenzten Platz dafür. Z. B. 640x480 div Container, während der PNG ich brauche, ist von 1920x1080 res), auf dem Zeichnung erfolgt sein wird. Dann brauche ich eine vergrößerte Version der gezeichneten Leinwand als PNG

Answer 1

Sie müssen das Element canvas selbst skalieren, da seine Größe die Ausgabegröße des Bildes bestimmt.

canvas.width = finalWidth;   // pseudo variables 
canvas.height = finalHeight; 

ctx.drawImage(img, 0, 0, finalWidth, finalHeight); // draws image scaled to final size 
var dataUrl = canvas.toDataURL(); // png at given size 

Der einzige Weg, um ein Bild in einer bestimmten Größe zu bekommen, ist die Größe auf Element zu setzen, wenn toDataURL() oder toBlob() verwenden. Die Verwendung von getImageData() gibt Ihnen nur die Rohdaten als Momentaufnahme und ignoriert alle Transformationen.

Wenn Sie das Element klein halten müssen, müssen Sie die Größe mit CSS einstellen.

Answer 2

Alle Elemente können ein Leben außerhalb der Seite haben, Sie können sie erstellen, verwenden sie, wie Sie möchten, und dannereforce sie für GC, um später aufzuräumen.

Ein Beispiel, das eine Leinwand außerhalb des Bildschirms verwendet, um ein Bild zu skalieren.

// Returns a new Image at size width, height 
function resizeImage(image, width, height){ 
    const canvas = document.createElement("canvas"); // create a canvas element 
    canvas.width = width; // set its width and height 
    canvas.height = height; 
    // Draw the image scaled onto it 
    canvas.getContext("2d").drawImage(image,0,0,width,height); 
    // Create a new image element 
    const scaledImage = new Image; 
    // Set its src to the canvas content 
    scaledImage.src = canvas.toDataURL(); // default mime type image/png 
    // Return the new scaled image. 
    return scaledImage; // note Image may no have loaded at this point 
    // The canvas is dereferences and will be cleaned up by GC very soon. 
    // nobody will ever know it existed ;| 
}