canvas toDataURL（）返回透明圖像

我試圖使用chrome擴展來截取當前頁面的截圖，然後在其上繪製一些形狀。在我完成了這個圖像之後，我把整個事情變成了一個畫布，就像它在我們上面繪製的divs現在被烘焙成了'形象'一樣，它們也是一樣的。做完這些之後，我想將畫布變成可以用來推送到我擁有的服務的png圖像，但是當我使用canvas.toDataURL()以便這樣做時，它創建的圖像源完全透明。如果我把它做成JPEG格式，那就完全是黑色的。canvas toDataURL（）返回透明圖像

我讀了一些關於畫布「變髒」的內容，因爲我已經畫出了一個圖像，而且這在Chrome中不起作用，但這對我來說並不合適，因爲我已經在之前使用它，但我無法使用我以前的方法。下面是不工作的代碼片段。我只是製作一個畫布元素，然後在此之前繪製一幅圖像。

var passes = rectangles.length; 
var run = 0; 
var context = hiDefCanvas.getContext('2d'); 

while (run < passes) { 
    var rect = rectangles[run]; 
    // Set the stroke and fill color 
    context.strokeStyle = 'rgba(0,255,130,0.7)'; 
    context.fillStyle = 'rgba(0,0,255,0.1)'; 
    context.rect(rect.left, rect.top, rect.width, rect.height);    
    context.setLineDash([2,1]); 
    context.lineWidth = 2; 
    run++; 
} // end of the while loop 
screencapImage.className = 'hide'; 
context.fill(); 
context.stroke(); 
console.log(hiDefCanvas.toDataURL());

和圖像數據，它返回是：數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ ... ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC這是一個空白，透明圖像。

有什麼特別的我需要用Chrome做什麼？有什麼我失蹤了嗎？謝謝，我感謝時間和幫助。

來源

2016-01-28 Ben Winks

當你註釋掉這部分在其上繪製矩形時，是否正確顯示屏幕？ –

@PatrickRoberts你問我畫布是否正確呈現沒有任何矩形？如果是這樣，答案是肯定的，它確實在畫布上呈現圖像。 –

我實際上並不認爲我能幫上忙，除非我能看到所有相關的代碼。就這一點而言，問題是不可重現的。 –

有同樣的問題，結果發現這裏的解決方案： https://bugzilla.mozilla.org/show_bug.cgi?id=749824

「我可以證實，它如果設置preserveDrawingBuffer工作

VAR glContextAttributes = {preserveDrawingBuffer：真正}; 變種GL。 = canvas.getContext（「experimental-webgl」，glContextAttributes）;「

在用preserveDrawingBuffer獲取上下文之後，toDataURL就像預期的那樣工作，沒有完全透明或黑色的圖像。

來源

2017-04-09 09:34:12 user3365531

我有同樣的問題。在ubuntu下，chrome＆FF工作正常，沒有'preserveDrawingBuffer'，但是在Win10中的chrome和ubuntu中的Opera會返回透明的圖像，同樣也有'preserveDrawingBuffer'。有趣的是，在Win10邊緣（即）也從畫布返回圖像，而不是透明圖像。 – CodeBy

canvas toDataURL（）返回透明圖像

回答

相關問題