图像到画布 / HTML5 转换 [关闭]答案

【问题标题】：Image to Canvas / HTML5 Conversion [closed]图像到画布 / HTML5 转换 [关闭]
【发布时间】：2011-03-02 14:39:57
【问题描述】：

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

【问题讨论】：

标签： image html canvas file-conversion

【解决方案1】：

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

【讨论】：

感谢您实际回答 OP 的问题。此页面上的其他答案无关紧要。
这个工具可以完成这项工作，但它也确实效率低下。它为每个像素做一个填充矩形，根本不识别连续的线或框，更不用说圆形或其他形状了。

【解决方案2】：

您不需要任何转换，只需使用图片（通过 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)

（取自here）。

请参阅developer.mozilla.org 上的教程。

【讨论】：

如果要使用canvas来操作图片的像素数据怎么办？

【解决方案3】：

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

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

另外，我整理了一个working jsfiddle demo。

【讨论】：

这会将画布转换为图像，但问题是将图像转换为画布。

【解决方案4】：

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

【讨论】：

【解决方案5】：

     <!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>

【讨论】：

【解决方案6】：

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

【讨论】：