1

http://jsfiddle.net/jdb1991/6sxke/を参照してください

画像が読み込まれるまで何に使用されるかわからないキャンバス要素があるので、画像オブジェクトを作成した後、その場で要素の寸法を変更できるようにする必要があります。

ただし、コマンドを非同期で実行しているように見えるため、問題が発生しています。サイズ変更が発生する前に、画像をコンテキストに書き込みます。

4

2 に答える 2

3

使用する：

function objectifyImage(i) {
    var img_obj = new Image();
    img_obj.src = i;
    return img_obj;
}

var canvas = document.getElementById('display');
var context = canvas.getContext('2d');
i = objectifyImage('https://www.google.co.uk/images/srpr/logo3w.png');
i.onload = function() {
    canvas.width = i.width;
    canvas.height = i.height;

    context.drawImage(i, 0, 0);
};
​

デモ： http： //jsfiddle.net/ycjCe/1/

要素のサイズはCSSで任意に設定できますが、レンダリング中に画像はレイアウトサイズに合わせて拡大縮小されます。（レンダリングが歪んでいるように見える場合は、CSSではなく、属性で幅と高さの属性を明示的に指定してみてください。）

ソース：https ：//developer.mozilla.org/en-US/docs/Canvas_tutorial/Basic_usage

于 2012-09-04T08:40:03.127 に答える
0

i = objectifyImageは、image.onloadハンドラーが定義される前に画像srcを設定するようです。これにより、キャッシュされた画像がonload定義の前に一部のブラウザに読み込まれます。キャッシュされた画像のタイミングの問題を回避するために、image.srcを設定する前に常にonloadハンドラーを定義することをお勧めします。

var self = this;
.....
this.img = document.createElement('img');
this.img.onload = function () {
    self.loaded = IMGSTATE_OK;
    $Debug.log('loaded image:"' + self.img.src);
    }
this.img.onerror = function () {
    self.loaded = IMGSTATE_ERR;
    $Debug.log('error image:"' + self.img.src);
    }
this.img.src = href;
..... later on check the load state
于 2012-09-04T22:57:10.633 に答える