使用javascript从url获取图像
Fetching image from url with javascript
我正在尝试在我的页面上显示来自不同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,它展示了整个过程。
相关文章:
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 如何使用javascript和xpath获取图像src
- 如何使用javascript从文件夹中获取图像并发布直接链接
- 如何从 javascript 中可能具有一个或多个图像的字符串中仅获取图像名称
- 获取图像节点js的主色
- 获取图像的平均外部像素颜色
- 使用asp.net FileUpload时从javascript获取图像宽度和高度
- jQuery:获取图像加载错误的详细信息
- 使用回调获取图像像素数据
- Javascript 正则表达式.获取图像源
- 获取图像宽度的最早事件
- 使用 JsonWebToken 授权标头获取图像
- 是从画布获取图像数据的任何方法,从远程视频中提取
- 铯:使用自己的OpenStreetMap服务器.:“无法获取图像磁贴”错误
- 从JSON数据中获取图像源
- 获取图像's磁盘中文件的实际高度和宽度
- 使用Jquery获取图像中心的文本
- 如何获取图像的宽度并将该值用作高度以使图像相当方正
- 在angular js和ionic中无法在服务器上捕获和上传图像以及从服务器上获取图像
- PhoneGap+JQuery_Mobile:如何通过单击按钮从照片/图像库中获取图像