canvas - 使用缓存时未使用 KonvaJS 在画布上绘制大图像

Question

我正在使用 konvajs 和 vue-konva 将图像定位在矩形区域上。我需要缓存此图像以便对其应用自定义过滤器。

此图像由用户上传，其尺寸可能非常大（例如来自设备相机），并且设备可以是资源有限的智能手机。

对于小图像，一切正常，但是当用户在移动设备上选择大图像（例如 2500x2500）时，图像首先呈现并cache()在图像节点上调用方法时消失。

这似乎取决于设备：在我的笔记本电脑上一切都很好，但在我的智能手机（都是高端设备）上却没有，两者都使用了最新版本的谷歌浏览器。我设法用更大的图像（~6000x6000）在我的笔记本电脑上重现了这个问题。

我真的不知道它是否与 Konva 有关，或者我是否达到浏览器对大文件的限制（这可以解释它取决于设备）。如果是这样，任何建议/解决方法将不胜感激。

最后但并非最不重要的一点是，我需要导出画布以便稍后打印（300dpi 分辨率，最终图像宽度必须在 2300 像素左右），所以我不能减少太多图像尺寸。

score 1 · Accepted Answer

这来自浏览器的限制。有时他们可能无法绘制太大的图像。在 HDPI 设备（几乎所有现代屏幕）Konva中也试图通过增加缓存大小来提高缓存质量。这对任何矢量形状（如矩形、圆形等）都是有意义的。但是对于图像，它并没有太大帮助。

因此，您可以使用以下方法减少缓存的图像大小：

image.cache({ pixelRatio: 1})

随着pixelRatio = 1缓存画布的大小将与图像大小完全相同。您可以尝试进一步减少它。喜欢pixelRatio = 0.5。如果您有一个大图像并且它被缩放到更小的尺寸，用户可能看不到质量降低的差异。

1 回答 1