Attendere fino a quando le modifiche CSS (ridimensionamento) hanno avuto effetto prima di continuare lo script

Question

Ho uno script che modifica le dimensioni di una tela per adattarla all'immagine che viene caricata su di esso e quindi scarica l'immagine dall'area di disegno. Ho bisogno di ridimensionarlo, altrimenti l'immagine scaricata include degli spazi bianchi attorno ad essa e sembra più piccola di quanto dovrebbe.

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; 

Ma quando l'immagine viene scaricata, ha ancora tutti gli spazi. Il mio script si sta completando prima che la tela venga effettivamente ridimensionata, anche se la ridimensiono all'inizio. Come posso ridimensionare la tela prima di completare il resto dello script?

modifica: posso vedere passando lo script che l'intero script termina prima che la tela cambi effettivamente le dimensioni nella pagina.

Answer 1

Si sta modificando il CSS per la tela ma questo modifica solo la dimensione visualizzata sullo schermo, non le dimensioni effettive dell'elemento canvas stesso. È possibile ridimensionare un elemento canvas usando CSS senza alterarne il contenuto.

Prova a creare un nuovo elemento canvas per ogni immagine dopo che è stata caricata, e imposta quella tela in modo che sia la dimensione corretta per quell'immagine e dovresti trovare che si salva correttamente.

Se si desidera mantenere la rappresentazione grafica della propria immagine nella tela/marcatura esistente non è un problema, è possibile copiare l'immagine su entrambi e lasciare la tela "funzionante" nascosta alla vista.