Javascript 画布中的一个大图像（需要优化）

嗨，我在画布上有一个大图像，它是

10000~px x 10000~px

。我需要放大/缩小功能。

---

提供我需要使用的技术。也许我需要将图像分割成更小的图像，比如谷歌地图或其他东西。

有几种不同的方法可以解决这个问题

Canvas支持通过调用上下文对象的drawImage函数动态更改图像的大小。这个函数有几种排列方式，你想要的是一种采用两个矩形和图像对象的排列方式。第一个矩形是图像在x、y坐标中的位置，以及要复制到画布对象的区域的高度和宽度。第二个是要在画布上绘制的x和y坐标以及高度和宽度的目标

简单示例代码

context.drawImage(srcImage, 0, 0, 10000, 10000, 0, 0, 800, 800);

现在，在本例中，它将获取完整图像，并将其缩小为800x800图像。调整图像大小时要小心，因为如果不保持原始纵横比，可能会严重扭曲图像

要制作缩放功能，您只需更改源高度和宽度，这实际上会使其“放大”。例如：

context.drawImage(srcImage, 1000, 1000, 2000, 2000, 0, 0, 800, 800);

在本例中，我们将获取图像的起始位置，并将其移动到源图像中的其他位置。然后我们将一个2000x2000的图像复制到同一个800x800画布对象中

现在我不推荐这种方法，因为它要求很多用户下载这么大的文件。接下来的几个解决方案将取决于您在后端服务器上使用的脚本语言。现在大多数现代语言都有一个像样的支持库来处理图像，因此您可以将图像上载到服务器，并为用户重新调整图像大小。脚本还可以创建原始映像的重新大小的缓存版本，这可能会有所帮助，以便您可以提高服务器性能。例如，您可以让JavaScript开始下载图像的最小版本，并在客户端请求时下载所需的下一级详细信息。同样，对于您的最终用户来说，这可能会变得非常带宽密集且速度缓慢

我在Google maps中看到的技术是，他们将您正在查看的区域划分为块，然后在您放大和缩小时，每个块将分别下载。您可以通过AJAX向服务器发送您当前的缩放级别和图像大小来复制这项技术。这可能是更复杂的版本，不仅需要在JavaScript上做大量工作，而且还需要在服务器代码上做大量工作，这些代码将处理图像数据的多个请求，这超出了本文的回答范围

---

你能把你试过的代码贴出来吗？