javascript - 等到 CSS 更改(调整大小)生效后再继续脚本

Question

我有一个脚本可以更改 Canvas 的大小以适合正在加载的图像，然后从 Canvas 下载图像。我需要调整它的大小，否则下载的图像包含周围的任何空白并且看起来比它应该的小。

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;

但是当图像下载时，它仍然有所有的空白。我的脚本在 Canvas 实际调整大小之前完成，即使我在开始时调整了它的大小。在完成脚本的其余部分之前，如何使 Canvas 实际调整大小？

编辑:我可以通过单步执行脚本看到整个脚本在 Canvas 实际改变页面大小之前完成。

Answer 1

您正在更改 Canvas 的 CSS，但这只会更改它在屏幕上显示的大小，而不是 Canvas 元素本身的实际大小。您可以使用 CSS 缩放 Canvas 元素而不改变其内容。

尝试在加载每个图像后为其创建一个新的 Canvas 元素，并将该 Canvas 设置为适合该图像的正确大小，您应该会发现它可以正确保存。

如果您想在现有的 Canvas /标记中保留图像的图形表示，这没问题，您可以将图像复制到两者，并将“工作” Canvas 隐藏起来不可见。