2 
    $.fn.imageCanvas = function() {

    if (!document.getElementById('bgCanvas')){
        $('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'}))
        var canvas = document.getElementById('bgCanvas');
        var ctx = canvas.getContext('2d');
    }
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img,0,0,438,300);
        console.log(this.width);
        console.log(this.height);
    }
    img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

ctx.drawImage に、x、y、幅、高さを書きました。しかし、canvas はこの Image を引き伸ばします。元の幅/高さでイメージするにはどうすればよいですか

4

2 に答える 2

1

単純に拡大縮小せずに画像を表示したい場合は、x と y だけで の3 つの引数のバリアントを使用します。drawImage

ctx.drawImage(img,0,0);

下端と右端を指定したサイズにクリップしたい場合は、引数が 9 つのバリアントを使用します。

ctx.drawImage(img,0,0,362,240,0,0,362,240);

最初の 4 つの数値は、クリッピング四角形の x/y および幅/高さを設定し、次の 4 つの数値は、キャンバスに描画されるクリップされた画像四角形の x/y および幅/高さを設定します。

編集：

問題は、jQuery 関数が、2 番目の引数の options オブジェクトのwidthおよびプロパティを、 DOM オブジェクトのプロパティとしてではなく、 CSS プロパティとして扱うことです。生成した HTML を調べると、次のことがわかります。height

<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>

必要なものの代わりに、次のようにする必要があります。

<canvas id="bgCanvas" width="500" height="500"></canvas>

問題に関する議論については、この質問を参照してください。解決策として、代わりに次を使用することをお勧めします。

$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500}))
于 2012-11-06T16:44:21.967 に答える
0

最近作成したこのライブラリを使用してみてください。これは、画像をロードし、幅と高さまたは割合を固定してサイズを変更し、base64 または blob との間で変換します。

https://github.com/vnbenny/canvawork.js

これがお役に立てば幸いです！

于 2016-11-03T11:27:54.743 に答える