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

Question

嗨我在画布上有一个大图像10 000~px x 10 000~ px。我需要放大/缩小功能。 为我提供我需要使用的技术。也许我需要拆分成较小的图像，如谷歌地图或其他东西..

Answer 1

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

1. 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画布对象中。

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

2. 我看到在Google地图中部署的技术是将您正在查看的区域分成块，然后在放大和缩小时每个块都会单独下载。您可以使用AJAX复制此技术，向服务器发送当前缩放级别和图像大小。这可能是更复杂的版本，不仅需要在JavaScript上进行大量工作，还需要处理多个图像数据请求的服务器代码，这超出了本答案的范围。