APIでローカルの画像をリサイズするさてさて、このブログを運営している影響で、常に記事にする「ネタ」を探すようになっているのですが、そのおかげで最新情報も知ることが多くなってきました。Chromeで本格的に使えるようになるということを知りました。通常ブラウザでローカルのファイルを操作するには一度サーバーにアップロードしてもらうという手順が必要でしたが、この機能を使えば直接ローカルのファイルを操作できるようになります。テキストファイルや画像の編集などもブラウザさえあれば実行できるようになるんです。これってすごいですよね。APIを使ってローカルにある画像のサイズを変更して保存できるようにしてみたいと思います。合わせて読みたいやりたいこと今回開発する機能の手順は次のとおりです。APIはまだ全ての環境で有効にはなっていません。そのため、この機能を有効にするためには以下の2つの方法が用意されています。APIが使えるようになるのですが、残念なことにトークンには有効期限があるので今回は2番目の設定を変える方法で実行します。chrome://flags/にアクセスしてください。api」と入力します。APIを有効(Enable)にします。すると、ページ右下に「Relaunch」ボタンが表示されるので、クリックしてブラウザを再起動しましょう。APIはHTTPSでしか動きません。ローカルにHTTPS環境をつくる場合はコピペでOK!ローカル環境にHTTPSを導入する(nginx編)を参考にしてください。次の項目から実際にプログラムを書いていきます!基本形をつくるまずは基本になる部分のHTMLとJavaScriptです。});</script></body></html>ここでは、VueとBootstrap(CSSのみ)が使えるようにCDNで読み込み、さらにVueのインスタンスには、以下の変数を用意しておきます。リサイズする縦横サイズ画像ファイルを選択する部分をつくるでは、ローカル環境にある画像を選択する部分を作っていきましょう。@click="chooseFile">リサイズする画像を選択</button></div>HTML側にはボタンを作り、クリックした時に実行されるメソッドをVue側に追加します。}});まず、この中で重要なのがcomputedにあるimageContents()です。ここでは、選択された画像データはそのままでは<img>タグでは表示できないので、URL.createObjectURL()を使って変換をしています。chooseFileSystemEntries()が画像を選択する部分で、もし選択されたらgetFile()を実行し、中身を変数imageDataに格納しています。このimageDataが元になってimageContents()でデータ変換することになります。Image()を使ってそれらを取得しています。選択画像のプレビュー部分をつくる続いては、選択された画像をプレビュー表示する部分です。</div></div>ここでやっているのは、まず先ほどつくったimageContents()の中身が存在しているかどうかをv-ifでチェックし、もし存在していれば(つまり、画像が選択されていれば)プレビュー画像を表示するようにしています。プレビュー画像の上には縦横のサイズを指定できるよう入力ボックスを2つ用意し、v-modelを使ってVueの変数と連動するようにしています。この縦横サイズは指定された数値によってリアルタイムにプレビュー画像に反映されるようにpreviewStylesというメソッドを指定するようにし、さらに、画像を保存するためのボタンにはsaveというメソッドも指定しています。これら2つのメソッドはこうなります。}});まずpreviewStyles()では、横幅を300pxに固定した場合高さがいくらになるかを計算し、それをスタイルシートに反映するようになっています。save()では、JavaScript内で<canvas></canvas>を作成し、そこに選択された画像を描画することでリサイズを実行しています。実際に画像を保存する部分はsaveImage()メソッドで、ここではセーブモードを指定したchooseFileSystemEntries()を使ってファイルを書き込むことになります。今回は説明が複雑になるためimage/pngのみを有効にしましたが、toBlob()を以下のようにするとjpegも対応できます。その場合、ラジオボタンなどでpngやjpegなど画像形式が選択できるようにするといいかもしれません。'image/jpeg');お疲れ様でした!テストしてみるでは、今回開発した内容を実際にテストしてみましょう。実際にリサイズした画像はこちらです。ダウンロードする今回実際に開発したソースコードを以下からダウンロードすることができます。準備するで説明した内容を全て実行しておく必要があります。APIを使って画像をリサイズする機能を作ってみました。いう機能がドンドン有効になってくるとウェブとローカルの垣根ももっと低くなっていきそうです。その反面いかに高いセキュリティを実現するかというのも重要になってくるわけで、便利さと危険は切り離せないものなんだなとも感じました。9なんかもこの機能を取り入れていくのかな、なんて思いました。(もしかしてもうやってる???)とにかく、今回は久しぶりに新しい機能に挑戦したので楽しかったです。みなさんもぜひやってみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。