Warten Sie, bis CSS-Änderungen (Größenanpassung) wirksam werden, bevor Sie das Skript fortsetzen

Question

Ich habe ein Skript, das die Größe einer Zeichenfläche an das geladene Bild anpasst und dann das Bild aus der Zeichenfläche herunterlädt. Ich muss die Größe ändern, sonst enthält das heruntergeladene Bild alle Leerzeichen um es herum und sieht kleiner aus als es sollte.

originalImg.onload = function() { 

    var width = originalImg.width; 
    var height = originalImg.height; 

    $("#myCanvas").css({ "height": height + "px", "width": width + "px", "margin-bottom": -height + "px" }); 

    var c = viewer.drawer.canvas; 

    c.toBlob(function(blob) { 
     saveAs(blob, '@Model.DatabaseName' + '.jpg'); 
    }); 
} 
originalImg.src = originalSrc; 

Aber wenn das Bild heruntergeladen wird, hat es immer noch alle Leerzeichen. Mein Skript wird abgeschlossen, bevor die Leinwand tatsächlich die Größe ändert, obwohl ich die Größe zu Beginn ändere. Wie kann ich die Leinwandgröße ändern, bevor ich den Rest des Skripts fertigstellen kann?

edit: Ich kann sehen, indem ich durch das Skript gehe, dass das ganze Skript beendet wird, bevor die Zeichenfläche tatsächlich die Größe auf der Seite ändert.

Answer 1

Sie ändern das CSS für die Zeichenfläche, aber ändert nur die Größe, auf der es auf dem Bildschirm angezeigt wird, nicht die tatsächliche Größe des Zeichenbereichselements. Sie können ein Canvas-Element mithilfe von CSS skalieren, ohne den Inhalt zu ändern.

Versuchen Sie, nach dem Laden ein neues Canvas-Element für jedes Bild zu erstellen, und legen Sie dieses Canvas auf die richtige Größe für das Bild fest, und Sie sollten feststellen, dass es korrekt gespeichert wird.

Wenn Sie die grafische Darstellung Ihres Bildes in Ihrer vorhandenen Leinwand/Markup beibehalten möchten, ist das kein Problem, Sie könnten das Bild auf beide kopieren und die Arbeitsfläche außerhalb der Ansicht verbergen.