在KonvaJS画布中拖动/缩放高分辨率图像时的性能问题



我目前正在加载一个相当大的图像(15000x10000)到konva画布。画布可以拖动到另一个画布中。如果图像的某些部分离开了浏览器的视图,则不会绘制图像。主要的问题是,拖拽是不平滑的,当画布缩小一点点,缩小和进入图像是相当不流畅的。

从文件系统加载图像,将其转换为Blob,创建一个对象url,如window.URL.createObjectURL(...),传递给htmlageelement,然后传递给Konva.Image

是否有一种方法可以加速图像拖动/缩放时的绘图性能,或者是唯一的方法,使其更快地下载原始图像?

15000x10000太大了。浏览器很难处理这个大小。

如果用户只看到图像的一部分,您应该将其分成几个较小的部分。您可以使用几个画布元素实时地动态地做到这一点。你可以使用Konva.Image在图层上显示画布。你可以实时生成这样的画布元素。

如果使用查看完整图像,则很可能将其按比例缩小,因此可以减小图像大小,而不会丢失可见质量。使用Konva,您可以轻松地为此使用缓存。以下是如何将图像宽度和高度缩小2倍的方法:

imageShape.cache({ pixelRatio: 0.5 });

最新更新