问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何获取远程图像以在画布中显示？

社区维基
1
新手上路，请多包涵

如何从服务器获取图像？

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

 <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);
}

原文由 Mark Harrison 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascript图片canvas
阅读 470
2 个回答
得票最新
社区维基
1
✓ 已被采纳

使用内置的 JavaScript 图像对象。

这是使用 Image 对象的一个非常简单的示例：

 myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';

根据对此答案的评论，这里有一个更适合您的场景的机制。

谢谢奥利耶！

值得注意的是，您不能同步请求资源，因此您实际上应该按照以下方式做一些事情：

 myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';

原文由 Eric Schoonover 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

如果你想在画布上绘制图像，你还需要等待图像实际加载，所以正确的做法是：

 myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';

原文由 olliej 发布，翻译遵循 CC BY-SA 2.5 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题