gpt4 book ai didi

javascript - 使用javascript从url中获取图像

转载 作者:行者123 更新时间:2023-11-30 12:57:57 24 4
gpt4 key购买 nike


我正在尝试在我的页面上显示来自不同 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 事件处理程序绑定(bind)到图像对象。参见 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/

关于javascript - 使用javascript从url中获取图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18417691/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com