画像読み込み → Canvas で操作 → 保存

読み込んだ画像に適当な処理を施して画像化するサンプル

■原画

■加工後
(Canvas なので保存できない)

■CanvasData を埋め込んだ Img
(右クリックから保存できる)

画像を読み込む

<input id='fileSelect' type='file' accept='image/*' />

accept='image/*' を追加すると選択できるファイルが画像ファイルのみになる。

読み込んだファイルを Canvas へ送る

ファイルの読み込みにイベントを追加

document.getElementById('fileSelect').addEventListener('change', loadImg, false);

イベントの結果からファイル情報を取得する

function loadImg(e){
var file = e.target.files[0];
...

複数の場合はまた違う処理が必要となる。

画像の URL を取得する

var imgA = new FileReader();
imgA.onload = function(e){
//e.target.result に画像URLが入る
};
imgA.readAsDataURL(file);

FileReader の readAsDataURL にファイル情報を渡すと onload で結果を取得できる。
e.target.result に読み込んだ画像の URL が入っている。

画像データを Canvas に埋め込む

imgA.onload = function(e){
var imgB = new Image();
imgB.onload = function(){
    var ctx = document.getElementById('canvasA').getContext('2d');
    ctx.drawImage(imgB, 0, 0, 320, 240);
}
imgB.src = e.target.result;
};

先ほど取得した URL から新しい画像を作成する。
その画像を目的の Canvas へ書き込む。

画像の操作

下準備

var ctx = document.getElementById('canvasA').getContext('2d');
var imgData = ctx.getImageData(0, 0, 320, 240);
var pixData = imgData.data;

コンテキスト.getImageData で必要な部分だけ切り出す。
切り出したデータの data プロパティに RGBA 情報が入っている。
このデータを元に加工したデータを新しい Canvas へ書き込む。

var ctxB = document.getElementById('canvasB').getContext('2d');
...
ctxB.fillStyle = 'rgba(...)';
ctxB.fillRect(x * 4, y * 4, 4, 4);

書き込む際は値を整数にしなければならない。
(float を書き込んでいることに気が付かずに頭を抱えたので覚書)

Canvas の画像化

var src = document.getElementById('canvasB').toDataURL('image/png');
document.getElementById('img').src = src;

Canvas の収められている URL を toDataURL で取り出す。
これを img タグの src に設定すれば Canvas 画像へのリンクが埋め込まれた状態になる。
これは右クリックから保存することができる。

jpg で保存する場合は .toDataURL('image/jpg') とする。

参考資料