等到 CSS 更改（调整大小）生效后再继续执行脚本

Posted 2023-05-08

【中文标题】等到 CSS 更改（调整大小）生效后再继续执行脚本

【英文标题】：Wait until CSS changes (resizing) have taken effect before continuing script

【发布时间】：2015-02-18 12:18:57

【问题描述】：

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

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;

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

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

【问题讨论】：

css() 方法应该是同步的（除非您在 CSS 中应用了 transitions）。您能否在jsfiddle.net 中提供该问题的示例？

不，我真的不能。我的页面在 seadragon 查看器上加载 DZI 图像，需要服务器检索的访问密钥。我无法在 jsfiddle 上复制它。

将console.log info 或alert 放入originalImg.onload 函数中，看看它是否真正进入了代码。

我知道它正在命中它，我已经逐步完成了它，如果 saveAs() 函数没有进入代码的那部分，它就不会触发。

【参考方案1】：

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

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

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