等到CSS更改（調整大小）在繼續腳本之前生效

Question

我有一個腳本，可以更改畫布的大小以適合正在其上加載的圖像，然后從畫布下載圖像。 我需要調整它的大小，否則下載的圖像包含它周圍的任何空格，看起來比它應該小。

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;

但是當圖像下載時，它仍然具有所有的空白。 我的腳本在畫布實際調整大小之前完成，即使我在開始時調整它的大小。 如何在完成腳本的其余部分之前使畫布實際調整大小？

編輯：我可以通過逐步執行腳本看到整個腳本在畫布實際更改頁面大小之前完成。

Answer 1

您正在更改畫布的CSS但僅更改它在屏幕上顯示的大小，而不是更改canvas元素本身的實際大小。 您可以使用CSS縮放canvas元素而不更改其內容。

嘗試在每個圖像加載后為每個圖像創建一個新的畫布元素，並將該畫布設置為該圖像的正確大小，您應該發現它正確保存。

如果要在現有畫布/標記中保留圖像的圖形表示沒有問題，可以將圖像復制到兩者，並將“工作”畫布隱藏在遠離視圖的位置。