HTML5 キャンバスに画像を配置し、pictures_html5 として保存する方法のチュートリアルのヒント

JavaScript を使用して画像をキャンバスにコピーします

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

コードをコピー

コードは次のようになります:

// 画像をキャンバスに変換し、新しいキャンバス要素を返します
function ConvertImageToCanvas(image) {
var Canvas = document.createElement("canvas");
Canvas.width = image.width;
Canvas.height = image.height;
Canvas.getContext("2d").drawImage(image, 0, 0);

キャンバスに戻る;
}

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

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

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

コードをコピー

コードは次のとおりです:

// キャンバスを画像に変換します
function ConvertCanvasToImage(canvas) {
var image = new Image();
image.src = Canvas.toDataURL("image/png");
画像を返す;
}

このコードは魔法のようにキャンバスを PNG 形式に変換できます。

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