如何在html5，canvas，javascript中将图像缩放到更大？

Question

我知道这听起来可能是新手，但有很多答案都没有做到。

我有一个高度为10,000像素的.png图像，并希望将其缩放到30,000像素的高度。它可以只是一个简单的伸展到高度。

  img = new Image(800, 30000);
  img.src = path;

但是当它出来时，它根本不会缩放图像。似乎是将大于10,000像素的图像扩展为不可见像素。

是否有其他人知道如何正确地做到这一点？

任何建议都将不胜感激。感谢。

Answer 1

这样做会有问题。您希望将其缩放到该大小的唯一原因是您要打印它。如果您需要打印它，那么您将需要另一种解决方案。

<强>现实 事实上，您只能看到显示器可以呈现的内容，因此创建这么大的图像是浪费资源和对抗浏览器的限制。

<强>解。 像往常一样加载图像，但不要将其添加到DOM。添加一个高度设置为30000px的div元素，这将提供一个滚动条。然后创建一个高度和宽度设置为window.innerWidth和window.innerHeight的画布，并将CSS样式{ position:fixed; top:0px; right:0px; }添加到该画布，这将修复画布的位置，但仍然通过背景div。

使用requestAnimationFrame调用检查更新滚动位置的函数，如果更改，则在画布上呈现图像的相应部分。

使用此方法可以显示图像非常大，但您只能显示可以看到的内容。如果你选择了你可以实现你自己的滚动，并使用一些花哨的数学，你可以使图像与宇宙一样大。想想谷歌地图最大缩放的大小是多少？这没关系，因为你只能看到它的一部分，所以它们只能呈现你能看到的部分。