JavaScriptを使用してCanvasコンテンツを画像に変換する方法の詳細な説明

私たちは先週、Mozilla Marketplace に投入する次のアプリの開発に半日を費やしました。今非常に人気のあるアプリケーションがあります、それは Instagram ですが、Facebook はそれを買収するために 100 万ドルを費やしました。私たちもポケットに 100 万ドルを入れたいので、Instagram スタイルのアプリケーションを開発することにしました。この記事では、画像をキャンバスにコピーする方法と、キャンバスの内容を画像として保存する方法を紹介します。 。 フォーマット。

デモを見る

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

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

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

	return canvas;
}

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

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

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

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

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

デモを見る

画像とキャンバスの間で変換するこれらのテクニックは、思っているよりも簡単かもしれません。今後の記事では、これらの画像にさまざまなフィルターを適用するいくつかのテクニックについて書く予定です。

推奨チュートリアル: 「

JavaScript ビデオ チュートリアル 」

以上がJavaScriptを使用してCanvasコンテンツを画像に変換する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。