使用缓存时未使用 KonvaJS 在 canvas 上绘制大图像
Large image not drawn on canvas using KonvaJS when using cache
我正在使用 konvajs 和 vue-konva 将图像定位在矩形区域上。我需要缓存此图像以便对其应用自定义滤镜。
此图片由用户上传，尺寸可能很大（例如来自设备相机），设备可以是资源有限的智能手机。
对于小图像，一切正常，但当用户在移动设备上选择大图像（例如 2500x2500）时，图像首先呈现并在图像节点上调用 cache() 方法时消失。
这似乎取决于设备：在我的笔记本电脑上一切正常，但在我的智能手机（均为高端设备）上一切正常，两者都具有最新版本 Google Chrome .我设法在我的笔记本电脑上用更大的图像 (~6000x6000) 重现了这个问题。
我真的不知道它是否与 Konva 有关，或者我是否达到浏览器对大文件的限制（这可以解释它取决于设备）。如果是这样，任何 advice/workaround 将不胜感激。
最后但同样重要的是，我需要导出 canvas 以便稍后打印（300dpi 分辨率，最终图像宽度必须在 2300px 左右）所以我不能减少太多图像大小。
您可以使用 this link 进行复制。
这是由于浏览器的限制。有时他们可能无法绘制太大的图像。同样在 HDPI 设备（几乎所有现代屏幕）中，Konva 正在尝试通过增加缓存大小来提高缓存质量。这对任何矢量形状（如矩形、圆形等）都有意义。但是对于图像，它并没有多大帮助。
因此您可以通过以下方式减小缓存图像的大小：
image.cache({ pixelRatio: 1})
使用 pixelRatio = 1 缓存的大小 canvas 将与图像大小完全相同。您可以尝试进一步减少它。喜欢pixelRatio = 0.5。如果您有一张大图片并将其缩放到较小的尺寸，用户可能看不到质量降低的差异。
我正在使用 konvajs 和 vue-konva 将图像定位在矩形区域上。我需要缓存此图像以便对其应用自定义滤镜。
此图片由用户上传，尺寸可能很大（例如来自设备相机），设备可以是资源有限的智能手机。
对于小图像，一切正常，但当用户在移动设备上选择大图像（例如 2500x2500）时，图像首先呈现并在图像节点上调用 cache() 方法时消失。
这似乎取决于设备：在我的笔记本电脑上一切正常，但在我的智能手机（均为高端设备）上一切正常，两者都具有最新版本 Google Chrome .我设法在我的笔记本电脑上用更大的图像 (~6000x6000) 重现了这个问题。
我真的不知道它是否与 Konva 有关，或者我是否达到浏览器对大文件的限制（这可以解释它取决于设备）。如果是这样，任何 advice/workaround 将不胜感激。
最后但同样重要的是，我需要导出 canvas 以便稍后打印（300dpi 分辨率，最终图像宽度必须在 2300px 左右）所以我不能减少太多图像大小。
您可以使用 this link 进行复制。
这是由于浏览器的限制。有时他们可能无法绘制太大的图像。同样在 HDPI 设备（几乎所有现代屏幕）中，Konva 正在尝试通过增加缓存大小来提高缓存质量。这对任何矢量形状（如矩形、圆形等）都有意义。但是对于图像，它并没有多大帮助。
因此您可以通过以下方式减小缓存图像的大小：
image.cache({ pixelRatio: 1})
使用 pixelRatio = 1 缓存的大小 canvas 将与图像大小完全相同。您可以尝试进一步减少它。喜欢pixelRatio = 0.5。如果您有一张大图片并将其缩放到较小的尺寸，用户可能看不到质量降低的差异。