7

是否有用于将典型图像格式（png、bmp、jpg/gif 甚至）自动转换为 Canvas / HTML5 的软件/服务？

4

6 回答 6

13

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

于 2011-06-30T14:05:23.010 回答
9

您不需要任何转换，只需使用图像（通过 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 上的教程。

于 2010-06-11T10:47:52.567 回答
1

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

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

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

于 2014-04-29T17:17:01.047 回答
1

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);
};
于 2016-10-06T10:28:58.507 回答
0 
     <!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>
于 2014-07-04T11:52:31.313 回答
0

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

于 2019-10-25T06:53:48.763 回答