canvas画像をリサイズ : JavaScript

Pocket

Canvasの画像をリサイズする。

» Demo
» Download

  1. ファイルアップローダーかドラッグアンドドロップで画像をCanvasに描画する。
  2. 横、縦、固定比を入力してリサイズの設定を行う。
  3. リサイズボタンでリサイズを実行する。
  4. オリジナル表示でオリジナルを表示できる。

リサイズ処理

  1. 横、縦、固定比の入力に応じてリサイズごのサイズがきまる。
  2. CanvasのtoDataURLメソッドでCanvas画像をimg要素にいったん読み込む。
  3. img要素のonloadハンドラでリサイズして再度Canvasへ描画する。

人気記事 はてなブックマーク

この日記のはてなブックマーク数