HTML5 / Javascript - 拉伸图像源

Question

您好我从网络摄像头获取图像并将其保存在画布上，我想要做的是通过x和y cooridnates拉伸它保持相同的img尺寸，我的意思是，这是原始网络摄像头图片：< / p>

这就是我想要伸展的方式：

<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; 
    }

}

关于如何通过x和y坐标拉伸canvas.toDataUrL()源并将其拉伸到src <img>元素的任何想法？

  

真正的问题是如何在不改变宽度的情况下拉伸图像   和高度（如上面的示例照片所示），这可能吗？

Answer 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";