gpt4 book ai didi

javascript - 如何获取远程图像以在 Canvas 中显示?

转载 作者:数据小太阳 更新时间:2023-10-29 03:59:07 25 4
gpt4 key购买 nike

如何从服务器获取图像?

我有这段代码可以让我在 Canvas 上绘制一些图像。

<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 object .

这是一个使用 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 - 如何获取远程图像以在 Canvas 中显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/164181/

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