0

Is it more beneficial to use a canvas element as a buffer for the image or is it more beneficial to use an img element as a buffer? is the closest thing to what I'm asking except the use case is slightly different. Currently I receive a file, for example:

let file=document.getElementById("input").files[0];

Then using URL.createObjectURL(file); it can be injected into the src attribute of an <img />.

My feeling is that using a canvas instead and drawing from the the file blob, would use less memory. Except it seems that in most examples an image is still used as a go-between.

Ex.

let image = document.getElementById("image");
let canvas = document.getElementById("canvas");
canvas.drawImage(image,0,0);
image.parentNode.deleteChild(image);

In this example I'm using DOM which is slow (not that speed matters in this case) I would likely use a temporary image object like everyone else.

The question is if going the extra step and putting the data into the canvas would be at all ever beneficial or does the browser do some kind of optimization where the src blob url is minimized or removed in some way to save memory?

As a sub question if I did want it in a canvas after all to do image processing or something is there a more efficient way of getting a file into a canvas?

haelmic
  • 541
  • 4
  • 18
  • What do you want to do? Just display the image file in an `img`? If yes, then using base64 would use approximately 33% more memory. Also, it's unlikely that using a `canvas` would reduce the memory footprint needed since it's one additional step rather than object URL which directly references the file itself. – nicholaswmin Mar 23 '19 at 17:08
  • Depends completely. Jpg and Png images are way smaller in their storage than the expanded bitmap in memory. The answer is not that simple. – GolezTrol Mar 23 '19 at 17:17
  • @GolezTrol that doesn't mater. As soon as you show the image, you'll always have the actual file in memory + the expanded image; the file may then be GC. But with the canvas you additionally need the memory it takes to store the pixels for the canvas. – Thomas Mar 23 '19 at 17:42
  • My point exactly. Base 64 encoding the image source or not is hardly relevant for the amount of resources you use in the end. – GolezTrol Mar 23 '19 at 18:55

0 Answers0