0

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

在此处输入图像描述

这就是我想要拉伸时的样子：

在此处输入图像描述

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

这是<img>在 html 中将源图像显示为元素的代码，因此我必须先拉伸源图像才能在 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>元素的任何想法？

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

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 回答