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

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

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

↓サンプル

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

■追記

↓変更

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

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください