我知道这听起来可能是新手，但有很多答案都无法做到。
我有一个高度为 10,000 像素的 .png 图像，我想将其缩放到 30,000 像素的高度。它可以只是简单地拉伸(stretch)到高度。
img = new Image(800, 30000);
img.src = path;
但是出来的时候根本不缩放图片。它似乎正在将任何大于 10,000 像素的图像扩展为不可见像素。
其他人知道如何正确地做到这一点吗？
如有任何建议，我们将不胜感激。谢谢。
最佳答案
这样做你会遇到问题。您想要将其缩放到该尺寸的唯一原因是您是否要打印它。如果您需要打印它，那么您将需要另一种解决方案。
现实 事实上，您只能看到显示器所能显示的内容，因此创建这么大的图像是一种资源浪费，也是对浏览器限制的挑战。
解决方案。
照常加载图像，但不要将其添加到 DOM。添加一个高度设置为 30000px 的 div 元素，这将提供一个滚动条。然后创建一个高度和宽度设置为 window.innerWidth 和 window.innerHeight 的 Canvas 并添加 CSS 样式 { position:fixed;顶部:0px；右:0px； 到那个 Canvas ，这将固定 Canvas 的位置，但仍然通过背景 div 提供滚动条。
使用 requestAnimationFrame 调用您的函数来检查更新的滚动位置，如果发生更改，则在 Canvas 上渲染图像的适当部分。
使用此方法会使图像看起来非常大，但您只显示可以看到的内容。如果您愿意，您可以实现自己的卷轴，并通过一些花哨的数学运算使图像像宇宙一样大。想一想最大缩放的谷歌地图，它的大小是多少？没关系，因为您只能看到它的一部分，所以他们只会渲染您能看到的部分。
关于javascript - 如何在 html5、canvas、javascript 中将图像缩放到更大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33471082/