ユーザーのローカルにある画像をアップロード、ブラウザ上で加工して、加工後の画像をダウンロードする処理をFile APIとCanvasを使って実装してみます。

■目次

1. Canvas上に画像を表示
2. File APIでアップロード
3. File APIでアップロードした画像をCanvas上に表示
4. Canvas上で画像の加工
5. 画像として出力
6. ダウンロードリンクを表示

1. Canvas上に画像を表示

まずはCanvas上にダミーで画像を表示させてみます。

See the Pen QqOyNp by tam_yi (@tam_yi) on CodePen.

drawImage()メソッドでCanvas上に画像を表示させています。

2. File APIでアップロード

File APIを使ってアップロードした画像をブラウザ上に表示してみます。

See the Pen dVZGOE by tam_yi (@tam_yi) on CodePen.

基本的には以前投稿したこちらの記事と同じです。

File APIを使ってローカルのファイルを読み込んでみる

3. File APIでアップロードした画像をCanvas上に表示

前述の1と2を合わせて、アップロードした画像をCanvas上に表示させてみます。

See the Pen boYEgB by tam_yi (@tam_yi) on CodePen.

Canvas上に画像を表示する処理はcanvasDraw()という関数にまとめて、File APIでファイルを読み込んだ後に実行しています。
canvasDraw()内の最初でclearRect()メソッドを使って、Canvas内のコンテンツを消去するようにしています。

4. Canvas上で画像の加工

Canvas上に表示した画像に加工を行います。
今回はシンプルに、画像の左上に「株式会社TAM」とテキストを追加するようにしてみます。

See the Pen MEOKJQ by tam_yi (@tam_yi) on CodePen.

addText()という関数を用意して、画像表示後にテキストを追加しています。

5. 画像として出力

Canvas上の表示を画像として出力してみます。

See the Pen EwbPZd by tam_yi (@tam_yi) on CodePen.

サンプルを試してみると、加工後の画像が上下に2枚表示されるかと思います。
見た目だと分からないですが、上がCanvasで表示しているもので、下はimgタグで表示されています。

画像への変換はtoDataURL()メソッドを使っています。
デフォルトではpng形式で出力されますが、引数に拡張子を指定することで変更もできます。
例えば、jpg形式で出力したい場合は以下のように引数を指定してください。

// 変更前
var data = canvas.toDataURL();

// 変更後
var data = canvas.toDataURL('image/jpeg');

6. ダウンロードリンクを表示

最後に、Canvasから出力した画像をダウンロードするリンクを表示してみます。

See the Pen dVZGNB by tam_yi (@tam_yi) on CodePen.

リンク先を画像のURLにして、download属性にファイル名を指定します。
画像の出力で拡張子を変更している場合は、.pngから適宜変更してください。

注意点として、今回のサンプルは比率が4:3の画像をアップロードした想定で作成しています。
比率によっては画像下部が切れたり、空白ができたりします。

これで想定していた処理が一通り完成しました。
今回は簡単に作っただけですが、画像の加工などを作りこむと面白いコンテンツを作成できそうです。