0

こんにちは、ウェブカメラから画像を取得しています。キャンバスに保存します。やりたいことは、同じ img 寸法を維持する x 座標と y 座標で画像を引き伸ばすことです。つまり、これは元のウェブカメラ画像です。

ここに画像の説明を入力

そして、これは私が伸ばしたときにどのようになりたいかです:

ここに画像の説明を入力

<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas>

これは html の要素にソース画像を表示するコード<img>なので、html で表示する前にソース画像を引き伸ばす必要があります

function snap() {

    if (localMediaStream) {

        ctx.drawImage(video, 0, 0);

        var oImg=document.createElement("img");
        oImg.setAttribute('src', canvas.toDataURL());
        oImg.setAttribute('alt', 'na');
        oImg.setAttribute('width', '1300');
        oImg.setAttribute('height', '1300');
        var img = document.body.appendChild(oImg);
        return img; 
    }

}

canvas.toDataUrL()ソースを x 座標と y 座標で引き伸ばして src<img>要素に引き伸ばす方法について何か考えはありますか?

本当の問題は、幅と高さを変更せずに画像を引き伸ばす方法です (上の写真の例を参照)。これは可能ですか?

4

1 に答える 1

1

スケーリング/配置を可能にする context.drawImage の拡張プロパティを使用できます。

ここに画像の説明を入力

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
    var w=img.width;
    var h=img.height;
    canvas.width=w;       // set the canvas size to the original image size
    canvas.height=h;
    ctx.drawImage(img,
        0,0,w,h,         // start with the image at original size
        -w/4,0,w*1.25,h  // widen the original image by 1.25X 
                         // and start drawing 1/4th off the left edge of the canvas
    );
}
img.src="temp18.png";
于 2013-12-12T17:11:48.093 に答える