タグ : , ,

canvas画像をリサイズ : JavaScript

投稿日 : 2012年11月12日 | 更新日 : 2012年11月12日 前のページへ戻る

Pocket

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

» Demo
» Download

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

リサイズ処理

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

JavaScript,Programming | 固定リンク | Comments (0)

このページの上へ移動

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


このページの上へ