Canvas と Image を相互に変換するサンプル コード_html5 チュートリアル スキル

JS Canvas を画像に変換する
オリジナルのデモ: JavaScript Canvas Image Conversion Demo
先週の Mozilla Web 開発カンファレンスでは、私たちは 1 日のほとんどを将来の Mozilla マーケット アプリケーションについて議論することに費やしました。最近最も人気のあるモバイルアプリケーションであるInstagramが、なんと10億ドルでFaceBookに売却された。
余分なお金を稼ぐのは構わないので、Instagram スタイルのアプリを作成することにしました (後で共有します)

この記事では、画像をキャンバスに変換する方法と、キャンバスが画像を抽出する方法を説明します。画像 。

画像を Canvas に変換
画像を Canvas (アートボード、キャンバス) に変換するには、canvas 要素コンテキストのdrawImage メソッドを使用できます:

コードをコピー

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

// 画像をキャンバス オブジェクトに変換します
function ConvertImageToCanvas(image ) {
//キャンバス DOM 要素を作成し、その幅と高さを画像と同じに設定します
var Canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image .height;
// 座標 (0,0) はここから開始することを意味し、オフセットに相当します。
canvas.getContext("2d").drawImage(image, 0, 0);
return Canvas;
}

画像を想定しますキャンバス上で処理した後、次のメソッドを使用してキャンバスを Image オブジェクトに変換できます。

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

// から画像 image を抽出します。 Canvas
function ConvertCanvasToImage(canvas) {
//DOM として理解できる新しい画像オブジェクト
var image = new Image()
// Canvas.toDataURL は Base64 でエンコードされた文字列を返します。もちろん、ブラウザ自体が
//PNG 形式を指定する必要があります。
image.src = Canvas.toDataURL("image/png");
return image;

そうですね! 画像をキャンバスに変換するのは、あなたが思っているよりも簡単です。今後、これらのテクニックを使用して、たくさんのお金を稼ぐことができるようになると思います。未来。