JavaScript:真正调整图像大小

Question

我编写了一个可以执行图像操作的模块。还总是有不同过滤器的预览等等。

问题是所有图片都应该很快。还有可以是一张 3000 x 3000 像素的图片。对于预览来说会花费太多时间。

有没有办法将图片大小调整为例如 200 x 200？我的意思是真正调整图像大小。

Answer 1

您可以使用 Canvas 在 JavaScript 中调整图像大小。该图像必须托管在与您的域相同的域中。

首先，在您创建的 Canvas 上绘制图像。您可以设置宽度和高度

document.getElementByTagName('canvas')[0].getContext(2d).drawImage....

之后，您可以将图像从canva恢复到您的图像标签。

document.getElementByTagName('img')[0].src=    document.getElementByTagName('canvas')[0].toDataUrl()

你可以看这个例子: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/