画布元素，图像大小调整和保存

Question

我正在开发一个玩具JS项目，将过滤器应用于图像。

如果我执行以下操作：

1. 通过FileReader和拖放
将图像添加到页面
2. 通过drawImage
将所述图片应用于500px画布元素的最大高度/宽度
3. 通过putImageData
将更改应用于所述画布
4. 通过Canvas2Image
保存画布

保存的图像是画布元素的大小还是原始图像尺寸？

Answer 1

您从画布创建的图像将始终为画布的大小。画布不知道你画了什么，所以图像的原始大小无关紧要。

我不知道Canvas2Image会对生成的图像做什么，但您可以使用以下方法将画布简单地提取为图像：

var dataUri = canvas.toDataURL('image/jpeg');

这会将图像保存为画布所在的大小（我假设Canvas2Image会在可能的地方执行相同操作，或者为bmp格式等模拟此方法。）

要提示用户将dataUri另存为图片，请参阅我的earlier answer here。