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

我想在canvas元素上使用toDataURL调用的输出。使用Javascript和Canvas元素的奇怪图像行为

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输出代替它应该是微不足道的，我只是无法解决为什么我的图像被裁剪。

来源

2011-12-19 MYR

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

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

来源

2011-12-21 18:32:44 MYR

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

来源

2011-12-19 19:46:47 Pointy

ctxtest是一个上下文。据我所知，你不在那里设置宽度和高度。 – MYR 2011-12-20 12:02:20

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

回答

相关问题