使用javascript从url获取图像

Fetching image from url with javascript

本文关键字：获取 图像 url javascript 使用      更新时间：2023-09-26


我正在尝试在我的页面上显示来自不同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>

另一个站点上的图像每1.5秒保存一次
结果是我无法查看图像
有什么想法吗？

谢谢

1。缓存问题

您的MyPicture.png在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/

您尚未定义canvas。首先用定义

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

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

看看小提琴，LoadImgURL，它展示了整个过程。

相关文章：