等到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，但这只会更改其在屏幕上显示的大小，而不是画布元素本身的实际大小。您可以使用 CSS 缩放画布元素而不更改其内容。

尝试在加载后为每个图像创建一个新的画布元素，并将该画布设置为该图像的正确尺寸，您应该会发现它正确保存。

如果您想在现有画布/标记中保留图像的图形表示形式，这没有问题，您可以将图像复制到两者，并将“工作”画布隐藏在视图之外。