当前位置： 文江博客话题详情

图像到画布/HTML5 转换

发布于 2024-09-05 15:44:29 字数 1539 浏览 14 评论 0原文

原文

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

倾其所爱 2024-09-12 15:44:29

这是一个生成 JavaScript 代码以在画布上绘制图像的工具： http://lab.abhinayrathore.com/ img2canvas/

Here is a tool that will generate JavaScript code to draw the image on canvas: http://lab.abhinayrathore.com/img2canvas/

回复 原文
予囚 2024-09-12 15:44:29

您不需要任何转换，只需使用图像（通过 url 或 DOM 中的任何一个新图像）

canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

（取自 此处）。

请参阅 developer.mozilla.org< 上的教程< /a>.

You don't need no conversion, just use the image (either new by url or any one in the DOM) by

canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

(taken from here).

See the tutorial on developer.mozilla.org.

回复 原文
不弃不离 2024-09-12 15:44:29

您可以使用上面列出的网站，但这里是相关代码：

function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}

另外，我整理了一个 工作 jsfiddle 演示。

You can use the site listed above, but here is the relevant code:

function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}

Also, I put together a working jsfiddle demo.

回复 原文
烟燃烟灭 2024-09-12 15:44:29

w3school 给出了答案：
http://www.w3schools.com/tags/canvas_drawimage.asp

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};

w3school has the answer:
http://www.w3schools.com/tags/canvas_drawimage.asp

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};
回复 原文
楠木可依 2024-09-12 15:44:29
     <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // draw cloud
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = '#0000ff';
      context.stroke();

      // save canvas image as data url (png format by default)
      var dataURL = canvas.toDataURL();
    </script>
  </body>
</html>      

     <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // draw cloud
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = '#0000ff';
      context.stroke();

      // save canvas image as data url (png format by default)
      var dataURL = canvas.toDataURL();
    </script>
  </body>
</html>
回复 原文
梦幻之岛 2024-09-12 15:44:29

Inkscape 实际上可以将文件保存为 HTML5 Canvas 格式。针对 SVG 进行了测试。

Inkscape can actually save files to HTML5 Canvas format. Tested for SVG.

回复 原文
~没有更多了~

关于作者

我爱人

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文