Strange memory is increased in Google Chrome using the Canvas drawImage method

Question

I developed an application with an image of ~ 160. I create 160 img elements and load them. After loading, I use the HTML5 canvas element to display them. I use drawImage to display images on a canvas.

My problem is that ONLY in google chrome the memory always grows. In other browsers (for example, firefox or IE11) my application uses ~ 260-300 megabytes, but in chrome it uses ~ 1.4 GB, and this is too much. The memory only increases when I call the drawImage method. I tried the clearRect method of the canvas context and I will try also with the re-creation of the canvas (remove + append combo).

Is there a possible solution to my problem? Is this a chrome bug? I tested it using the chrome task manager. I see that the cache image is also growing, but this is not logical for me, because I downloaded the images only 1 time, and I just use them with the drawImage method.

Thank you for your experience.

Answer 1

I have a similar problem with the contour of an image with very large images (3000x2000) to create a preview before loading:

• First I load the image ( image.src = url).
• After loading the image, I resize it to canvas drawImage ( canvas.drawImage(image, ...))
• da dataURL canvas.
• , .

( Chrome 35) , . image.src = null, .

, DevTools (, , , , ), , , .

Answer 2

, . drawImage Chrome, , , 25 Chrome.