GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

Canvas Javascript

‘input type=file’から’canvas’への転写(画像の引き伸ばし対処)

投稿日:2012年9月26日

‘input type=file’から’canvas’に転写する際、画像のサイズがcanvasのサイズより大きいとcanvasのサイズでトリミングされて表示されてしまいます。
なので、画像のサイズに合わせてcanvasのサイズを変更したいのですが、何故か画像を読み込んでから動的にcanvasのサイズを変更するとトリミングされた画像が引き伸ばされて表示されてしまいます。

canvasのサイズを変更するタイミングをいろいろ試してみましたが、うまくいかなかったので、結局’img’オブジェクトの読込後に画像サイズに合わせたcanvasを生成することで対応しました。

↓サンプル

画像をdrawImageする前にcanvasのリサイズを行っても、画像が拡大(引き伸ばし)されて表示されてしまうのは何故なんでしょう?

■追記

↓変更

jQueryのwidth(height)メソッドではなく、attrでwidth(height)属性を変更すれば、うまくいきました orz

width(height)メソッドでは駄目な理由は不明。

(cssでの変更と属性値での変更で動作が変わるのかな?)

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。