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元素而不更改其内容。

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

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

等到CSS更改（调整大小）在继续脚本之前生效

1 个答案: