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

Question

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

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

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

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

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

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

您可以使用this link 进行复制。

Answer 1

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

因此，您可以通过以下方式减少缓存的图像大小：

image.cache({ pixelRatio: 1})

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