Javascript Canvas, resize image

Question

I wonder how to use canvas in JS. I have the following questions:

1. Let's say I have inputted an image and on my page I can access its src of blob (as far as I know this is the best way to get the image dynamically):

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

Now I want to get this image in my JS and then modify it (resize and so on). Is blob src enough to do that?

2. When I'll resize the image with canvas, where to store that resized image? In input tag's value attribute or what? What's the best practice to resize image on front before sending it via.network? That input is in my form as I want to send that resized image to my server, and not to overflow my.network.

3. Also, is it possible to paste a watermark on that image with JS?

Hope you got it, and huge thanks in advance!

Answer 1

You can download and store your image as an Image object, it's not necessary to have it in your html.

You can draw it on a canvas using drawImage function, which let you draw the image with the proportion of your choice. You can use the same function to draw a watermark on the canvas.

Once you are happy with the image on the canvas you can get it as a blob using toBlob function and upload to your server