如何获取要显示在画布中的远程图像？
时间：2020-03-06 15:02:46 来源:igfitidea点击:
如何从服务器获取图像？
我有一些代码，可以在画布上绘制一些图像。
<html>
<head>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');
for (i=0;i<document.images.length;i++){
ctx.drawImage(document.images[i],i*150,i*130);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canv" width="1024" height="1024"></canvas>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif">
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif">
<img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png">
</body>
</html>
而不是循环document.images，我想不断地从服务器获取图像。
for (;;) {
/* how to fetch myimage??? */
myimage = fetch???('http://myserver/nextimage.cgi');
ctx.drawImage(myimage, x, y);
}
解决方案
使用内置的JavaScript Image对象。
这是一个使用Image对象的非常简单的示例：
myimage = new Image(); myimage.src = 'http://myserver/nextimage.cgi';
根据此答案的注释，这是一种更适合方案的机制。
谢谢olliej！
It's worth noting that you can't synchronously request a resource, so you should actually do something along the lines of:
myimage = new Image();
myimage.onload = function() {
ctx.drawImage(myimage, x, y);
}
myimage.src = 'http://myserver/nextimage.cgi';
要在JavaScript中添加图片，我们可以执行以下操作：
myimage = new Image() myimage.src='http://....'
如果页面上的图像的ID为" image1"，则可以将image1的src分配给myimage.src。
如果我们使用的是jQuery，则可以执行以下操作：
$.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');
我们还可以在img标签中添加宽度和其他任何内容。
如果要在画布上绘制图像，则还需要等待图像实际加载，因此正确的操作是：
myimage = new Image();
myimage.onload = function() {
context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';
