Javascript Canvas，调整图片大小

Question

我想知道如何在 JS 中使用 canvas。我有以下问题：

1. 假设我输入了一张图片，在我的页面上我可以访问它的 src of blob（据我所知是动态获取图像的最佳方式):

<img ... src="blob...">

现在我想在我的 JS 中获取此图像，然后对其进行修改（调整大小等）。 blob src 是否足以做到这一点？

2. 当我使用 canvas 调整图像大小时，将调整后的图像存储在哪里？在 input 标签的 value 属性还是什么？在通过网络发送图像之前调整图像大小的最佳做法是什么？ input 在我的表单中，因为我想将调整后的图像发送到我的服务器，而不是溢出我的网络。

3. 另外，能否用JS在图片上贴上水印？

希望你明白了，非常感谢！

Answer 1

您可以将图像下载并存储为 Image 对象，不必将其保存在 html 中。

您可以使用 drawImage 函数在 canvas 上绘制它，这样您就可以按照您选择的比例绘制图像。您可以使用相同的功能在 canvas.

上绘制水印

如果您对 canvas 上的图像感到满意，您可以使用 toBlob 函数将其作为 blob 并上传到您的服务器