タグ

ブックマーク / qiita.com/yamazaki3104 (1)

  • HTML canvas で画像を切り取る(crop) Javascript サンプルコード - Qiita

    HTML canvas & Javascript を使った画像の切り抜き「Crop」のサンプルコードです。 ブラウザ上で画像を加工しようとしたら、canvas しかないわけですが、 いちばんやりたいのは「切り抜き:Crop」なんだけど、まぁ、シンプルなコードがほしかったのにみつから無いわけで。 無いときは自分で作るのがエンジニアの掟なわけです。 切り取る(crop) Demo 中央の枠の中を切り出すタイプ。先に切り出す枠を決めておいて、画像の方を確認しながら切り出す。 なんと言いますか、マウスで角から角へドラッグしたり、枠をつまんで移動するUIよりも、このほうが直感的でわかりやすいし、スマホとかタブレットにも向いているUIだと思うのです。 Crop してますか? 実際に触ってみてもらうのが早いでしょう。⬇︎ canvas 上で、マウスをドラッグすると切り抜く場所を変えられます。 canva

    HTML canvas で画像を切り取る(crop) Javascript サンプルコード - Qiita
    Cherenkov
    Cherenkov 2020/08/06
    crop トリミング 切り抜き scale
  • 1