dragging/zooming KonvaJS 中的高分辨率图像 canvas 时的性能问题
Performance issue when dragging/zooming high resolution image in KonvaJS canvas
我目前正在将相当大的图像 (15000x10000) 加载到 konva canvas。 canvas 在另一个 canvas 中是可拖动的。如果图像的一部分离开浏览器的视图，则不会绘制图像。主要问题是当缩小 canvas 一点点时拖动不流畅，缩小和放大图像时非常卡顿。
图像从文件系统加载，变成一个 Blob，像 window.URL.createObjectURL(...) 一样创建一个对象 url，传递给 HTMLImageElement，然后传递给 Konva.Image。
有没有办法在 dragging/zooming 时加快图像的绘制性能，或者是加快原始图像下采样速度的唯一方法？
15000x10000 很大。浏览器很难处理那个大小。
如果用户只能看到该图像的一部分，您应该将其分成几个较小的部分。您可以使用多个 canvas 元素在 real-time 中动态地执行此操作。您可以使用 Konva.Image 在图层上显示 canvas。您可以实时生成这样的 canvas 个元素。
如果要查看完整图像，很可能是按比例缩小的，因此您可以减小图像尺寸，而不会降低可见质量。使用 Konva 您可以轻松地为此使用缓存。此处如何使图像宽度和高度缩小 2 倍：
imageShape.cache({ pixelRatio: 0.5 });
我目前正在将相当大的图像 (15000x10000) 加载到 konva canvas。 canvas 在另一个 canvas 中是可拖动的。如果图像的一部分离开浏览器的视图，则不会绘制图像。主要问题是当缩小 canvas 一点点时拖动不流畅，缩小和放大图像时非常卡顿。
图像从文件系统加载，变成一个 Blob，像 window.URL.createObjectURL(...) 一样创建一个对象 url，传递给 HTMLImageElement，然后传递给 Konva.Image。
有没有办法在 dragging/zooming 时加快图像的绘制性能，或者是加快原始图像下采样速度的唯一方法？
15000x10000 很大。浏览器很难处理那个大小。
如果用户只能看到该图像的一部分，您应该将其分成几个较小的部分。您可以使用多个 canvas 元素在 real-time 中动态地执行此操作。您可以使用 Konva.Image 在图层上显示 canvas。您可以实时生成这样的 canvas 个元素。
如果要查看完整图像，很可能是按比例缩小的，因此您可以减小图像尺寸，而不会降低可见质量。使用 Konva 您可以轻松地为此使用缓存。此处如何使图像宽度和高度缩小 2 倍：
imageShape.cache({ pixelRatio: 0.5 });