🐥

canvasで特定領域をクロップして拡大する

2023/02/21に公開

デモ

使い方

  • 上に切り抜かれる側のcanvasと、切り抜いた側のcanvasが表示されています
    • 黒い枠が切り抜く場所です
  • 下の方にスクロールするとスライダーが二個あります。上からx,yです
    • xとyを操作すると切り抜き場所が変わります

関数

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

こちらの関数を使いました。切り抜き元のimage、範囲選択、拡大範囲を指定できるので、めちゃくちゃ便利です。詳しい使い方はデモから参照できると思います。

参考ページ

以下がとてもわかりやすいです。
https://www.htmq.com/canvas/drawImage_s.shtml

Discussion