Question

我正在尝试使用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来获取图像并在一个函数中使用它，这将让我把它变成一个交互式Jigsaw，此代码目前需要一个url，用toDataUrl输出替换它应该是微不足道的，我只是无法解决为什么我的图像被裁剪。

Answer 1

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

Answer 2

除了Pointy的建议，我发现我使用testOutput的画布没有设置宽度和高度，因此我使用的浏览器的默认值恰好足以显示图像的一小部分。上下文不是你设置大小的地方，但Pointy的建议让我再次看到画布的尺寸设置，欢呼声。

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

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

2 个答案: