Q&A
> 同じ機能を実装したいと考えて方法を調べようと思うのですが、
クライアント側に実装するのかサーバー側に実装するのかどっちでしょう？ サーバー側であれば Web アプリは何かなど質問者さんの環境を書いてください。
#知りたい事
Twitterやyoutube、facebookなどでプロフィール画像を設定したりヘッダー画像を設定する際、
自身が選択した画像からトリミングしたい範囲を指定して設定できる機能があるのをご存じかと思います。
同じ機能を実装したいと考えて方法を調べようと思うのですが、
『そもそもなんという名称の機能なのか』
が分からず苦労しています。
デザインやフロントの動作について詳しい方がいらっしゃいましたら是非教えてください。
ちなみに自分では以下の内容がそれに近いのかな？と思っています。
もし使おうとしている機能、やろうとしていることが正しい＆もっと便利な機能やライブラリがあるよ
って場合も教えていただけると助かります。
#自分で調べて近いなと思った情報
・CSSを使ったobject-fitという機能
調べた記事ではトリミングする画像の位置はCSS記述時に％やｐｘで指定すると書かれていましたが、
ユーザーが動的に変えたい場合は恐らくJavascriptを使って要素をいじるんだろうな、という何となくの
イメージをしています。
分からない点は、「トリミングするための画面」についてです。
トリミングが完了し、ユーザーがアップロードするまでプロフ欄やヘッダー欄は変わらない、という事は
トリミング範囲を選択しているポップアップ画面は別ページを使用して読み込んでいるのでしょうか？
その後、トリミング完了ボタンなどを押した段階で一時的にDBに登録→プロフ欄やヘッダー欄に反映
最終確認画面で保存を押せばDBのトランザクションをコミットする、的な？
実装するのはクライアント側です！
イメージ的にはTwitter、youtubeの機能をほぼ（丸々）一緒です
サーバー側で使用する言語はJava(Spring)を想定していますが、確定ではないです
Javascriptは必要になるイメージなので、それと相性が良い言語が他にあればそれを選んだり、
サーバー側もJavascriptを使用するなども全然可能です
Twitter の場合、スマホから Twitter アプリ（ブラウザではなく）を使って投稿する場合、Twitter アプリに備わっている画像編集機能を使ってトリミングするという方法があるそうですが、そういう機能のことを言ってますか？
伝え方が悪くてすいません。
ユーザー（クライアント）がプレビューで確認しながら画像をトリミングし、アップロード（DBに登録）できる機能のことをイメージしていました。
回答2件
0
手法は様々かとは思いますが、一時的にサーバーサイドにアップロードし、サーバーサイドの言語で画像をサムネイル用に加工したものを生成し、それを表示させるようなやり方もあると思います。
それぞれの言語に大抵は画像を取り扱うライブラリが用意されているのでそちらを使います。
GDとかImageMagickとかよく聞きます。
投稿2020/03/13 05:52
総合スコア80850
0
自己解決
申し訳ありません。質問時には調べ方が悪くてなかなか情報が見つからなかったのですが、
ここで質問をするために自分が書いたワードをシンプルに検索してみたら想定していた機能を
見つけることが出来ました。
お騒がせしました。
※質問前の検索ではJavascriptと言語を絞って検索していなかったため
『検索ワード』
Javascript 画像 トリミング
以下にリンクを記載しておきます。
画像を自由にトリミングできるjQueryプラグイン「Cropper」
投稿2020/03/13 06:18
総合スコア27
あなたの回答
tips
プレビュー
