canvasとjsでユーザがアップした画像とフレーム画像を合成する

2017/09/22

web制作

ユーザがアップした画像と、サイト側で用意している画像をcanvasで合成します。
合成した画像を保存ボタンでダウンロードする所まで実装していきます。
サンプルはアップした画像をリサイズ+中心に配置、その上にフレーム画像を被せる仕様です。

使っている外部JSファイル


目次

  1. 実装サンプル
  2. サンプルのソース
  3. HTMLのポイント
  4. JSのポイント
  5. 注意点、余談

実装サンプル

こんな感じのものが出来ます。


サンプルのソース

index.html

style.css

script.js


HTMLのポイント

16行目の #file は画像アップ用のよくある input タグです。
accept でアップするファイルを制限出来ます、今回の場合は画像ファイルのみ。

ファイル選択時に画像のみ表示されますが、画像以外を禁止するものではないので
ファイル名の横にあるオプションを切り替えると、画像以外も選択できます。
なので画像以外のアップ禁止処理をJSで対応させます。

19行目と22行目、canvasは合成処理に使うだけなので非表示にしています。
合成後のデータを #result のソースに入れて表示させます。
imgタグで表示する理由は、リサイズが楽なのと右クリック・スマホの長押しでデフォルトの画像保存機能が使えるからです。

21行目は保存ボタンで、download 属性を使い image.png というファイル名でユーザに保存させます。
download 属性はIE11で動かないのでJSの調整が必要になります。


JSのポイント

32行目~ #file のアップファイルを画像以外禁止にしています。

52行目~ exif.js をここで使います。
デジカメ、スマホ等で撮影したJPEGにはEXIF(撮影した場所や端末等の情報群)が付随します。
このEXIFを簡単に取得する為に exif.js を使っています。
今回必要になる情報は Orientation だけで、この数値に合わせて画像の向きを調整します。
サンプルでは Orientation の 1・8・3・6 のみ対応しています。
数値だけでは良く分からないと思うのでイメージを載せます。
Orientationのイメージ
このように Orientation の数値によって画像の向きが決まっています。

canvasで画像の向きを調整するには、canvas自体を回転+移動する必要があります。
その処理をしているのが、161行目~ の部分です。
canvasの場合、回転の軸になるのが左上になる為、ズレた分移動させます。
rotateのイメージ

67行目は アップした画像のデータを src 配列の先頭に入れてます。
データは FileReader.onload のイベント引数 e.target.result に格納されています。

77行目~ canvasにアップした画像とフレーム画像を描画しています。
drawImage の順番は後から上に被せていく形になるので、アップ画像 → フレーム画像の順にします。

94行目~ 保存ボタンの挙動を確定させています。
IE11の場合は、window.navigator.msSaveBlob(blob, “ファイル名”); で保存させる事ができます。
詳しくはこちら


注意点、余談

サンプルでは対応していませんが、画像を許可する場合はSVGを禁止にした方が良いと思います。

アップした画像を素で出力させる場合
スマホだと Orientation が 6 とかでも普通に真っ直ぐ表示されます。

canvasの toDataURL ですが、描画している画像に別ドメインの画像が含まれていると
クロスドメインでエラーが発生します。

以上です。


SNSでシェアする

コメントを残す