HTML5 Canvas に画像を配置し、画像として保存する方法

この記事では、HTML5 Canvas に画像を配置して画像として保存する方法を主に紹介します。特に、画像コンテンツを画像として保存する機能は、必要な友達に参考にしていただけます。

画像をコピーするには JavaScript を使用します。 Canvas

画像をキャンバスに配置するには、canvas 要素のdrawImage メソッドを使用します:

 // Converts image to canvas; returns new canvas element

  function convertImageToCanvas(image) {

  var canvas = document.createElement("canvas");

  canvas.width = image.width;

  canvas.height = image.height;

  canvas.getContext("2d").drawImage(image, 0, 0);</p>
<p> return canvas;

  }

ここでの 0, 0 パラメータはキャンバス上の座標点であり、画像はこの場所にコピーされます。

JavaScriptを使用してキャンバスを画像形式に保存します

キャンバスでの作業が完了したら、次の簡単な方法を使用してキャンバスデータを画像形式に変換できます:

// Converts canvas to an image

  function convertCanvasToImage(canvas) {

  var image = new Image();

  image.src = canvas.toDataURL("image/png");

  return image;

  }

このコードはキャンバスを PNG 形式に変換する魔法を実行してください。

画像とキャンバスの間で変換するこれらのテクニックは、思っているよりもはるかに簡単かもしれません。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

HTML5 と JS は、ローカル画像のトリミングとアップロード機能を実装します

HTML5 モバイル開発を通じて画像の圧縮とアップロード機能を実装します

以上がHTML5 Canvas に画像を配置し、画像として保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。