3

widthまたはheight属性がimgHTML のタグに設定されている場合、単純な drawImage() 呼び出しが調整されないのはなぜですか?

これは、私が何を意味するかを示すjsfiddleデモです。

HTML

<!--Try adding width="200" to the img tag below. 
    You'll see that the original image (left on 
    the output) is resized accordingly, but the 
    drawImage rendering is not. If you console.log 
    imgs.width, it's set to 200, but the 
    result is unchanged.
-->
<img src="https://i.imgur.com/mbXJe0f.png" width="200">

JavaScript

imgs = document.getElementsByTagName('img')[0];

//I set EVERYTHING I know about to the proper values, just to see what happens
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
style = '';
style += 'width:'+imgs.width+'px;';
style += 'height:'+imgs.height+'px;';
canvas.setAttribute('style',style);
canvas.width = imgs.width;
canvas.height = imgs.height;

console.log(imgs.width,imgs.height);

var testImage = new Image();
testImage.src = imgs.src;
testImage.width = imgs.width;
testImage.height = imgs.height;
testImage.onload = function() {
    square = 100;
    context.drawImage(this,150,70,square,square,0,0,square,square);
}

そのデモでwidth、soleimgタグに属性を設定すると、左側の画像は変更されますが (元の画像)、右側の画像は変更されません (drawImage レンダリング)。

元の src に設定testImage.srcしていることがわかりますが、開発者コンソール ログを開くと調整される幅と高さも設定しています。

どうしてこれなの？それに応じて調整されるようにそのコードを調整できますか?

ここで予想される結果は、drawImage render が画像のより大きな領域を表示することです。サイズ変更ではないことは簡単にわかります。「無限」記号は、同じであるべき場所でサイズが異なります。

4

2 に答える 2

3

元の画像のサイズを変更することはできません。CSS を使用してのみサイズ変更できますが、結果としてスケーリングされますが、元のサイズは元のサイズになるため、幅と高さの画像のプロパティを変更しても機能しません (サイズを変更するには、 img.style.width を使用できます) img.style.height を使用しますが、これはデータ自体には影響せず、ブラウザ ウィンドウへのレンダリングのみに影響します)。

キャンバスと大きな画像を小さく描画するには、 sourceではなくdestinationに新しいサイズを設定する必要があります。

修正されたフィドル:
http://jsfiddle.net/L3495/4/

（画像のオンロードイベントで）：

context.drawImage(this, 0, 0, this.width, this.height,
                        0, 0, newWidth, newHeight);

ここでは、元の画像と同じソースで描画します。ここのソースは、キャンバスに画像全体を使用するように指示します。

次に、目的のサイズで目的地に描画します。

ご覧のフィドルでは、キャンバスをデモ用の元の画像の半分のサイズに設定しています。これは、目的の値に対して画像が描画されるサイズになります。

于 2013-06-30T05:39:59.703 に答える
1

イメージ オブジェクトのwidthおよびheight属性は、オブジェクトを DOM に配置するときに、ブラウザのレンダリング エンジンによってのみ使用されます。

呼び出しではdrawImage、ターゲットの位置 (スケーリングは行われません)、ターゲットの四角形 (スケーリングは行われます)、またはターゲットとソースの両方の四角形 (スケーリングは行われます) を指定できます。

drawImage画像の.widthおよび.height属性を使用する場合は無関係です。

ただし、元のサイズを検出するために画像を読み込んだ後に使用できますが.width、.heightそれらを変更すると、DOM でそのオブジェクトのレンダリングがどのように行われるかにのみ影響します。

于 2013-06-30T05:53:08.553 に答える