JavaScriptでCanvasコンテンツを画像に変換する方法

先週は半日をかけて、次のMozila Market placeへの応用を開発しました.あるアプリは今非常に熱いです.それはInstagramです.フェイスブックは100万ドルで買いました.私たちも100万ドルをポケットに入れたいです.Instagramスタイルのアプリケーションを開発することにしました.この記事では一枚の写真をcanvasにコピーする方法と、逆にどのようにキャンバスの内容を画像形式に保存するかを紹介します.
JavaScriptを使って、画像をキャンバスにコピーします.
キャンバスに写真を入れるには、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);

    return canvas;
}

ここの0, 0パラメータの画布の座標点は、画像がここにコピーされます.
JavaScriptでキャンバスをピクチャー形式に維持します.
キャンバスの作品が完成したら、以下の簡単な方法でcanvasデータを画像フォーマットに変換できます.

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

このコードは不思議にcanvasをPNGフォーマットに変えられます.
これらは写真とキャンバスの間で変わる技術はあなたが思っているよりずっと簡単です.これからの文章では、これらの画像をフィルタ処理する技術をいくつか書きます.
転載してから webhek