Chromebookで作るPWAアプリ日記6

junkawa@Chromebookで始める開発日記

2018年7月14日 13:49

こんにちは、junkawaです。

画像切り抜きアプリを作ってみました。

ポイント
・SVG画像アイコンをカーソルオーバで色変更
・アイコンクリックで画面遷移
・アイコンクリックでファイルオープン
・アイコンクリックで画像保存

画像切り抜きにはCroppieを使いました。

ソースはこちら。

SVG画像アイコンをカーソルオーバで色変更

SVGアイコンを取得します。

<svg id="outline-save-alt" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="5vh" height="5vh" viewBox="0 0 24 24" xml:space="preserve">
 <g id="outline-save-alt-line" fill="#747474">
   <path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M13,12.67l2.59-2.58L17,11.5l-5,5l-5-5l1.41-1.41L11,12.67V3h2V12.67z"/>
 </g>
</svg>

ダウンロードしたSVGファイルをテキストエディタで開き、index.htmlにコピーして編集します。

(function() {
   $('outline-save-alt')
       .on({
           'mouseover': function() {
               $('outline-save-alt-line').attr('fill','#141414');
           },
           'mouseout': function() {
               $('outline-save-alt-line').attr('fill','#747474');
           }
       });
})();

js/index.jsでイベントを設定し、カーソルオーバで色を変えます。

これが

こうなります。

アイコンクリックで画面遷移

(function() {
   $('#outline-open-in-new').on({
       'click': function() {
           let a = $('<a></a>').on({
               'click': function() {
                   location.href = "../";
               }
           });
           a.trigger('click');
       }
   });
})()

js/index.jsでSVG画像(id:outline-open-in-new)がクリックされた時のイベントを書きます。

<a>タグ要素を生成し、location.hrefに遷移先のURLをセットします。

a.trigger('click')でクリックを実行しています。

アイコンクリックでファイルオープン

<body>
 <input type="file" id="uploadFileElem" accept="image/*" style="display:none">

index.htmlに見えない(display:none) inputタグを用意します。

   $('#uploadFileElem').change(function() { uploadFile($(this).prop('files')[0]); });

js/index.jsで、画像ファイルをオープンした時のイベントハンドラをセットします。

index.htmlのinputタグ内にonchange="uploadFile(this.files)"と書いてしまうと、index.jsをwebpackがminifyする際にuploadFileというメソッド名が短縮されてしまうため、実行時にエラーが起こってしまいます。

したがって、index.js内でinputのイベントハンドラをセットします。

    $('#outline-insert-photo').on({
       'click': function() {
           $('#uploadFileElem').click();
       }
   });

js/index.jsに、SVG画像(id:outline-insert-photo)がクリックされた時に、上記のinputタグのイベントハンドラ(ファイルオープン)が実行されるように記述します。

アイコンクリックで画像保存

SVG画像アイコンをクリックして、canvasの画像をダウンロードします。
Chromeだとダウンロードしましたが、Safariだと画像オープンになりました。

   let a = document.createElement('a');
   let e = document.createEvent('MouseEvent');
   a.download = 'download.png';
   a.href = canvas.toDataURL();
   e.initEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
   a.dispatchEvent(e);

canvasをcroppieから取得した後の処理です。

SVGアイコンをクリックした時にこの処理を呼び出すと、画像をダウンロードできます。

ご覧下さりありがとうございます。いただいたサポートは図書館への交通費などに使わせていただきます。