Html 使用javascript从url获取图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18417691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fetching image from url with javascript
提问by Yinon Eliraz
I am trying to show an image on my page from a different url.
我试图在我的页面上显示来自不同 url 的图像。
<body>
<div id="container">
<br />
<canvas width="500px" height="375px" id="canvas">
</canvas>
<img src="http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png" />
</div>
<script>
var img = new Image;
img.src = "http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png";
var timer = setInterval(function () { MyTimer() }, 200);
function MyTimer() {
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0,500,675);
img = new Image;
img.src = "http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png";
}
</script>
The image on the other site is being saved every 1.5 seconds.
The result is that I cant view the image.
Any ideas why?
Thanks!
另一个站点上的图像每 1.5 秒保存一次。
结果是我无法查看图像。
任何想法为什么？
谢谢！
回答by tokkonopapa
1. Cache issue
1.缓存问题
Your MyPicture.pngreturns Cache-Control: max-age=31536000in HTTP response. So browser may get image from its cache on second time. You need to add query string something like thie:
您在 HTTP 响应中MyPicture.png返回Cache-Control: max-age=31536000。因此浏览器可能会第二次从其缓存中获取图像。您需要添加类似于 thie 的查询字符串：
img.src = "http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png?time=" + (new Date()).getTime();
2. Too short fetching period.
2. 抓取周期太短。
I think fetching period 200msec is too short. It's better to bind onloadevent handler to the image object. See How to fetch a remote image to display in a canvas?.
我认为获取周期 200 毫秒太短了。最好将onload事件处理程序绑定到图像对象。请参阅如何获取远程图像以在画布中显示？.
function copyCanvas(img) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
}
function loadImage() {
var img = new Image();
img.onload = function () {
copyCanvas(img);
};
img.src = "http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png?time=" + (new Date()).getTime();
}
3. Double buffering
3. 双缓冲
I think your script intend to pre-load image. So it's better to make a double buffering.
我认为您的脚本打算预加载图像。所以最好做一个双缓冲。
Single Buffering version: http://jsfiddle.net/tokkonoPapa/dSJmy/1/
单缓冲版本：http: //jsfiddle.net/tokkonoPapa/dSJmy/1/
Double Buffering version: http://jsfiddle.net/tokkonoPapa/dSJmy/2/
回答by Yinon Eliraz
You have not defined canvas. Define it first with:
您尚未定义canvas. 首先定义它：
var canvas = document.getElementById('canvas');
Then, use loadevent to draw image on to the canvas.
然后，使用load事件在画布上绘制图像。
Checkout the fiddle, LoadImgURLwhich demonstrates the whole process.
查看演示整个过程的小提琴LoadImgURL。
