← 一覧へ

やってみよう写真を動かしたり、下のスライダーで大きくしたりしてみてください

ジェスチャーメジャー(よく見る)

画像の切り抜き(トリミング)

Image Cropper

写真の上に枠が出て、写真を動かしたり大きくしたりして、使いたい部分だけを切り抜ける。

別名トリミング画像クロップアイコンの切り抜き範囲を選んで切り取る

どこで使われている?

よく見かける場所
SNSのアイコン写真の設定、プロフィール画像、写真アプリの編集
使うとよい場面
アイコンなど、決まった形に写真を合わせてもらうとき
避けたい場面
写真をそのまま使えばよいとき

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「画像の切り抜き(トリミング)(Image Cropper)」を実装してください。

動き:写真の上に丸や四角の枠を重ね、枠の外を暗くする。写真をドラッグで動かし、スライダー(またはピンチ)で拡大・縮小して、枠の中に入った部分を切り抜く。

使う部品:Cropper.js などのライブラリ(canvas で切り抜き)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならCropper.js などのライブラリ(canvas で切り抜き)
iPhoneアプリなら自作(PhotosPicker で選んだ画像を DragGesture と MagnifyGesture で調整)
AndroidアプリならuCrop などのライブラリ
Flutterならimage_cropper パッケージ
React Nativeならreact-native-image-crop-picker