How To Draw Image To Canvas, When The Image Changes, Not The URI?

Here is the basic implementation of how i'm drawing an image to the canvas. var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var image

Solution 1:

IMO, the best solution is to add a timestamp (you might add a random value also, just to be sure) to the image as a parameter. This avoids having to store a specific variable counter and is really easy to implement. Perhaps something like:

"?" + +new Date() + "_" + Math.random ()

You might also simply want to avoid caching altogether, but this is problematic if you are NOT converting all of your images to canvas objects, since in most Webkit-based browsers, in-between-refreshes image caching is disabled if between-pages caching is also disabled..

[edit:] Or, in other words, in Webkit-based browsers, if you reload something with Javascript and your header says "expired", the image will be re-requested. In IE11 and Firefox, the image will be cached until the page refresh, even if caching is disabled.

http://code.google.com/p/chromium/issues/detail?id=336292

Solution 2:

Maybe you can do something roughly like this:

  var i = 0;

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  function drawImg(x, y) {
     imageObj.onload = function() {
       context.drawImage(imageObj, x, y);
     };
     imageObj.src = 'http://www.mysite.com/temp.jpg?' + i;
     i++;
  }

This way you'll get a list of urls like:

• http://www.mysite.com/temp.jpg?1
• http://www.mysite.com/temp.jpg?2
• http://www.mysite.com/temp.jpg?3

This seems to make Chrome send a web request, where as if you kept the url the same, no web request is sent at all.

I tested in Chrome and this does force a new image to be loaded. I would also set your headers to not cache that url.

I'm testing a few other browsers right now.

Solution 3:

Having had cache issues with complex form pages that behave like small single page applications, my usual solution is to set various no cache headers on the response. This means that you need to be able to configure that on your web server or do it in server side code.

These are the typical cross-browser headers:

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

See this answer for server side code samples: https://stackoverflow.com/a/2068407/2836187