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 demoをまとめました。

于 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 に答える