javascriptimagecanvasservertodataurl

JavaScript using image only on local user

I'd like to understand how Image work in JavaScript.

When you create an image like this: 

this.image = new Image();
this.image.src = canvas.toDataURL();

Is the image loaded only on the user computer or does it go on the server side?

Because I'd like to create images only on user side to optimize the canvas render.

Solution

  • This bit of code creates a new Image object and stores it into a variable.

     this.image = new Image();

    This bit of code stores your toDataURL() to your .src property within your image variable. Here's some documentation on the .src property.

    https://www.w3schools.com/jsref/prop_img_src.asp

    this.image.src = canvas.toDataURL();

    Because you have created the variables locally then it will not be stored on the server. Essentially you're storing the URL for the image, based on current code. You can change the type to say toDataUrl(image/jpeg) and even scale the quality with overloads in the method toDataURL(image/jpeg, 1.0) Check out this helpful article on the .toDataURL() method and what it does more specifically.

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL