Javascript Canvas，調整圖像大小

Question

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

1. 假設我輸入了一張圖片，在我的頁面上我可以訪問它的blob src （據我所知這是動態獲取圖片的最佳方式）：

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

現在我想在我的 JS 中獲取此圖像，然后對其進行修改（調整大小等）。 blob src 足以做到這一點嗎？

2. 當我使用 canvas 調整圖像大小時，調整后的圖像存儲在哪里？ 在輸入標簽的值屬性中還是什么？ 在通過.network 發送圖像之前調整圖像大小的最佳做法是什么？ 該輸入在我的表單中，因為我想將調整大小的圖像發送到我的服務器，而不是溢出 my.network。

3. 另外，是否可以使用 JS 在該圖像上粘貼水印？

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

Answer 1

您可以將您的圖片下載並存儲為圖片object，您不必將其保存在您的 html 中。

您可以使用drawImage function 在 canvas 上繪制它，這樣您就可以按照您選擇的比例繪制圖像。 您可以使用相同的 function 在 canvas 上繪制水印。

一旦您對 canvas 上的圖像感到滿意，您可以使用toBlob function 將其作為 blob 獲取並上傳到您的服務器