使用Javascript和Canvas元素的奇怪图像行为

我试图利用canvas元素上toDataURL调用的输出

var snapshotjig = document.getElementById("snapParent");
var testOutput = document.createElement('canvas');
var ctxtest = testOutput.getContext('2d');
var imageTest = new Image();
var canvas = capture(video, scaleFactor);    

imageTest.src = canvas.toDataURL();
ctxtest.drawImage(imageTest,0,0,imageTest.width, imageTest.height);
snapshotjig.appendChild(testOutput);

为了完成，捕获代码如下所示：

function capture(video, scaleFactor) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    var w = video.videoWidth * scaleFactor;
    var h = video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');
        canvas.width  = w;
        canvas.height = h;
    var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
    return canvas;
}

在html中有一个id为snapParent的div元素。 捕获函数似乎工作得很好，但我使用的实例toDataUrl然后尝试绘制该输出时得到了不同的结果，此时我在div元素snapParent中得到了图像的一小部分。 不确定是什么原因造成的，或者我做错了什么

---

如果您对此有任何想法，我们将不胜感激。我试图利用toDataUrl获取图像，并将其用于一个函数中，该函数将使其成为一个交互式拼图，此代码目前获取一个url，用toDataUrl输出替换它应该很简单，我就是搞不明白为什么要裁剪我的图像。

在我看来，好像你忘了设置ctxtest画布的宽度和高度。

更进一步，我发现我使用的画布testOutput没有设置宽度和高度，因此，我使用的浏览器默认值恰好足以显示图像的一小部分。上下文不是您设置大小的地方，而是Pointy的建议让我再次查看画布的维度设置，cheers bud

---

我使用捕获方法设置testOutput画布大小。

ctxtest是一个上下文。据我所知，你没有在那里设置宽度和高度。