使用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元素的奇怪圖像行爲

回答

相關問題