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（）返回透明图像

回答

相关问题