如何将图像绘制到画布上，当图像更改时，不是URI？ [英] 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 imageObj = new Image();

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

我有一个服务器端图像渲染脚本，相同的文件位置例如：temp.jpg。我使用Ajax来提示浏览器的图像更改，我运行的功能，以再次加载图像。但是，由于网址总是相同，所以第一个加载的图片会被缓存，并且不会重绘。

I have a server side image rendering script, where I am writing an image to the same file location eg: "temp.jpg". I'm using Ajax to cue the browser when the image changes, and I run the function to load the image again. However, it seems since the URL is always the same, the first image loaded is cached and will never redraw.

我找到了几个解决方案，但我不确定什么将最好工作或是真正的最佳解决方案。一些建议包括用时间戳轻微地操纵URL，我已经看到一些流的引用。

I've found several solutions but I'm not sure what will work best or is the real optimal solution. Some suggestions have included slightly manipulating the URL with a timestamp, and I've seen some references to streaming.

一些要点：

• 我不想清除画布，我想要最近的图像在上一张图像的顶部，如果x，y坐标变化或图像大小不同，它应该层。


• 我真的

非常感谢。

编辑：

决定将我的github项目包含在我正在开发的socket.io版本中。我在作品中有5个不同的版本，但这是我跟踪的主要。随意撕开它我确信我有一些不好的做法，当涉及到内存管理。 https://github.com/Pwn9/tcp-iobridge

Decided to include my github project for the socket.io version of this I am working on. I've got about 5 different versions in the works but this is the one I'm tracking mostly. Feel free to rip it apart I'm sure I have some bad practices when it comes to memory management. https://github.com/Pwn9/tcp-io-bridge

推荐答案

IMO，最好的解决方案是添加一个时间戳（也可以添加一个随机值，只是为了确保）参数。这避免了必须存储特定的变量计数器并且真正容易实现。也许像：

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 ()

以避免缓存，但这是有问题的，如果你不是将所有的图像转换为画布对象，因为在大多数基于Webkit的浏览器，中间刷新图像缓存被禁用，如果页面之间的缓存也禁用..

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：]或者换句话说，在基于Webkit的浏览器中，如果你重新加载Javascript并且标题为expired请求。在IE11和Firefox中，即使禁用缓存，图片也将被缓存，直到页面刷新。

[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

这篇关于如何将图像绘制到画布上，当图像更改时，不是URI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！