使用 javascript 从 url 获取图像答案

【问题标题】：Fetching image from url with javascript使用 javascript 从 url 获取图像
【发布时间】：2013-08-24 10:44:48
【问题描述】：

我正在尝试在我的页面上显示来自不同网址的图片。

<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 秒保存一次其他网站上的图像。
结果就是看不到图片。
任何想法为什么？

谢谢！

【问题讨论】：

可能是图像缓存的问题，或者您的服务器/客户端连接速度不够快，无法在删除和重写之前下载图像。

标签： javascript html image

【解决方案1】：

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 事件处理程序绑定到图像对象。见How to fetch a remote image to display in a canvas?。

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/

【讨论】：

【解决方案2】：

您尚未定义canvas。首先定义它：

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

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

检查小提琴，LoadImgURL，它演示了整个过程。

【讨论】：