使用javascript从url中获取图像

Question

我试图从不同的网址在我的页面上显示图像。

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

其他网站上的图像每1.5秒保存一次。
结果是我无法查看图像。
有什么想法吗？

谢谢！

Answer 1

1.缓存问题

MyPicture.png返回Cache-Control: max-age=31536000 HTTP响应中的Cache-Control: max-age=31536000 。 因此浏览器可能会在第二次从其缓存中获取图像。 你需要添加像thie这样的查询字符串：

img.src = "http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png?time=" + (new Date()).getTime();

2.取出时间太短。

我认为取水时间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.双缓冲

我认为你的脚本打算预加载图像。 因此，最好进行双缓冲。

单缓冲版： http ： //jsfiddle.net/tokkonoPapa/dSJmy/1/

双缓冲版： http ： //jsfiddle.net/tokkonoPapa/dSJmy/2/

Answer 2

您还没有定义canvas 。 首先用以下方法定义：

var canvas = document.getElementById('canvas');

然后，使用load事件将图像绘制到画布上。

查看小提琴， LoadImgURL ，演示整个过程。

使用javascript从url中获取图像

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-08-24 15:45:51

1.缓存问题

2.取出时间太短。

3.双缓冲

解决方案2
0

使用javascript从url中获取图像

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-08-24 15:45:51

1.缓存问题

2.取出时间太短。

3.双缓冲

解决方案2 0

解决方案1
3 已采纳 2013-08-24 15:45:51

解决方案2
0