HTML5 - 画像サイズの検出、キャンバスのサイズ変更

Question

最近、私はCatifier.comを作成してホストしました。

私はうまくいかなければならないバグがあり、バックグラウンドとして設定するとイメージが伸びます。

肖像画がひどく見えます。

ユーザーがボックスにペーストした画像の幅と高さを検出し、それに応じてキャンバスのサイズを変更できますか？

Answer 1

サイズを知るには、画像をDOM要素にロードする必要があります。

• は、目に見えないDOM要素であなたの写真を追加します。

  だからbasiclyあなたがそれをしたいとき、ここでの手順です。

• オンロードイベントが発生した場合、画像の幅と高さを取得することができます。
• 次に、これらの2つの変数に応じてキャンバスを作成します。

すべては非常に少数のjavascript行で行うことができます。

Answer 2

ちょうど考えをもっと与えるために、これをすばやく実践するための非常に一般的で機能的ではない可能性があります。

var img = document.getElementByTagName('img'); 
for (var i = 0; i < img.length; i++) { 
    var width = img[i].width, 
     height = img[i].height; 

    // do some stuff with the img[i] width and height here if you like. for each image on the page... 
} 

あなたが実際にやってしまうのではなく、img.widthやheightと同じくらい簡単です。それがもっと役立つならば。