コメント:この記事では、主に写真を掲載し、それらをHTML5キャンバスの写真として保存する方法を紹介します。特に写真コンテンツを写真として保存します。これは非常に実用的な機能です。それを必要とする友達はそれを参照できます。
JavaScriptを使用して画像をキャンバスにコピーします
画像をキャンバスに入れるには、キャンバス要素のドローイメージメソッドを使用します。
//画像をキャンバスに変換します。新しいキャンバス要素を返します
関数convertimagetocanvas(画像){
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を使用してキャンバスを画像形式に保存します
キャンバスでの作業が完了した場合、次の簡単な方法を使用して、キャンバスデータを画像形式に変換できます。
//キャンバスを画像に変換します
関数convertcanvastoimage(canvas){
var image = new Image();
image.src = canvas.todataurl( "image/png");
画像を返します。
}
このコードは、キャンバスを魔法のようにPNG形式に変換できます!
写真とキャンバス間を変換するためのこれらの手法は、あなたが思っているよりもはるかに簡単かもしれません。