ブラウザ上で画像のトリミングができる機能を実装しました

2017.11.11
開発・技術情報

ぱくたその写真はすべてフリー素材ではありません。各写真ページにある　Sサイズ｜Mサイズ｜Lサイズ　の画像サイズのみフリー素材として利用可能です。

これらの画像サイズは縦横比が固定なので、縦の画像は縦、横の画像は横でしかダウンロードできません。縦の画像を横で使いたい場合は、一度ダウンロードしてから Photoshop などの加工ツールでトリミングを行う必要があります。

ダウンロード→画像加工という手間は、慣れている人なら苦でもないのでしょうが、苦手な人にとっては面倒で仕方ないはず...

それなら、『ブラウザ上で画像のトリミングができて、そのトリミングした画像もフリー素材でダウンロードできたら便利ですね』っと、エンジニアの Yuu さんから提案があり、マッハで実装されましたので報告します。

トリミング方法について

各写真ページの一番大きいサムネイル画像の右上に、トリミングマークが追加されています。

髪の毛でハートのかたちをつくる女子｜ぱくたそフリー写真素材

このトリミングマークをクリックすると、サムネイルが黒く反転してトリミングモードに！

左上の数値は、現在のトリミングサイズ（横 × 縦）、右上の ✕ボタンを押せばトリミングはキャンセルとなります。

トリミングが完了したら、サムネイル画像下のバーから

ご利用規約・ガイドに同意して、トリミングしたサイズの画像がダウンロードできます。

トリミング機能で新しいシーンを作り出そう

そのまま使うのは難しい構図の写真、例えばゾンビカップルの写真では

死後やっと手に入れた幸せに呆然とする腐乱系男子｜ぱくたそフリー写真素材

トリミング機能をつかうことで

このように、ゾンビ写真（閲覧注意）が恋愛コンテンツにも使えるアイキャッチ画像に変身です。ぜひトリミング機能を使いこなしてください！

トリミング機能の実装にあたって

先日からテスト期間を兼ねてしれっと実装したのですが、今のところバグ報告もなく安定しています。利用者も気づいてきたのか、そこそこ利用されはじめている感じです。（アナリティクスで計測中）

このトリミング機能ですが、スマートフォン（レスポンシブ）に対応しています。

画面が小さいと利用しずらいかもしれませんが、壁紙にしたいなどあればぜひ利用してください。

次に、IE11にも対応しています。当初「IE11は切るべきか・・・」と考えていましたが、ぱくたそ利用者の10％以上がIE11ユーザーのこともあって、無理やり対応していただきました！実装までのフローなど、詳しい話はエンジニアの Yuu さんに直接聞いてみてください。

今後は、文字を直接入力できたり、インスタ風の画像フィルターを入れらる機能が追加されるかもしれません。

バグも含めて、このような機能が欲しいなどありましたら気軽にご意見いただけたら幸いです。('A')ﾉ

※ ちなみに、クロップ機能ともトリミング機能とも呼ぶらしいんですが、画像の後処理はトリミングだろーという個人的主観から、トリミング機能と呼称しています。クロップ機能でも間違いではありませんのであしからず。