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

【问题标题】：Weird image behaviour using Javascript and Canvas element使用 Javascript 和 Canvas 元素的奇怪图像行为
【发布时间】：2012-01-23 21:18:52
【问题描述】：

我正在尝试利用画布元素上的 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 输出替换它应该是微不足道的，我只是无法弄清楚为什么我的图像被裁剪。

【问题讨论】：

标签： javascript html5-video html5-canvas

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

进一步提出尖锐的建议，我发现我使用 testOutput 的画布没有设置其宽度和高度，因此使用了我正在使用的浏览器的默认值，恰好足以显示图像的一小部分.上下文不是您设置大小的位置，但 Pointy 的建议让我再次查看了画布的尺寸设置，干杯芽。

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

【讨论】：