Javascript canvas toDataURL（）返回透明图像

我正在尝试使用chrome扩展来获取当前页面的屏幕截图，然后在上面绘制一些形状。在我对图像做了这样的处理之后，我把整个东西变成了一幅画布，这样它就可以全部放在一起了，就像我在上面画的div现在被烘焙成了“图像”，它们是同一幅图中的一个。完成此操作后，我想将画布转换回png图像，我可以使用它来推送到我拥有的服务，但当我使用

canvas.toDataURL（）

时，它创建的图像源是完全透明的。如果我把它当作jpeg，它是完全黑色的

我读到一些关于画布被“弄脏”的信息，因为我在画布上画了一个图像，这在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());

var passs=rectangles.length；
var-run=0；
var context=hiDefCanvas.getContext（'2d'）；
while（运行<通过）{
var rect=矩形[run]；
//设置笔划和填充颜色
context.strokeStyle='rgba（0255130,0.7）'；
context.fillStyle='rgba（0,0255,0.1）'；
context.rect（rect.left、rect.top、rect.width、rect.height）；
setLineDash（[2,1]）；
context.lineWidth=2；
运行++；
}//while循环的结束
screencapImage.className='hide'；
context.fill（）；
stroke（）；
log（hiDefCanvas.toDataURL（））；

返回的图像数据为：data:image/png；base64，IVBorW0KggoaaaAnsuhueugacwaaavgcayaaaaaaaagaxaaagaeleq…ecbagqiecaaecbagqiecaaecbagqiecaaecbagqiecaqbvkbue32pnyaaaaelftksuqmcc是一个空白、透明的图像

---

我需要用Chrome做些特别的事情吗？有什么我遗漏的吗？谢谢，非常感谢您的时间和帮助。

遇到了同样的问题，并在此处找到了解决方案：

“我可以确认，如果您设置preserveDrawingBuffer，它会工作

var glContextAttributes={preserveDrawingBuffer:true}； var gl=canvas.getContext（“实验性webgl”，glContextAttributes）

---

在使用preserveDrawingBuffer获取上下文后，toDataURL按预期工作，没有完全透明或黑色的图像。

由于以下帖子，我发现了一个类似的问题

这些方法返回一个承诺，因此您需要等待它解析后才能填充变量。 我的解决方案是设置asyn函数并等待结果：

const canvas = <HTMLCanvasElement>document.getElementById("myCanvas")[0];
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = async (e) => { ctx.drawImage(img, 0, 0); ctx.font = "165px Arial";ctx.fillStyle = "white"; b64Code = await (<any>canvas).toDataURL(); }

const canvas=document.getElementById（“myCanvas”）[0]；
设ctx=canvas.getContext（'2d'）；
设img=新图像（）；
img.onload=async（e）=>{ctx.drawImage（img，0，0）；ctx.font=“165px Arial”；ctx.fillStyle=“white”；b64Code=wait（canvas.toDataURL（）；}

当您注释掉在画布上方绘制矩形的部分时，它是否正确显示屏幕？@PatrickRoberts您是在问我画布在没有任何矩形的情况下渲染是否正确吗？如果是这样的话，答案是肯定的，它确实正确地在画布上渲染了图像。除非我能看到你所有的相关代码，否则我认为我帮不了你。只有这样，问题是不可重现的。@PatrickRoberts我在查看代码时发现了一些其他问题，因此我可能会偶然发现一个修复方法。对不起，我无法发布所有代码。谢谢你抽出时间。你看到你的控制台有安全错误吗？如果是这样，那就是“污染”问题。如果不是，你可能在整个图像上画矩形，然后填充它们，这会导致图像为空。我也有同样的问题。在ubuntu中，chrome&FF在没有

PreservedDrawingBuffer

的情况下运行良好，但在Win10中，ubuntu中的chrome和Opera也会使用

PreservedDrawingBuffer

返回透明图像。非常有趣的是，在Win10 edge（ie）中，也会从画布返回图像，而不是透明图像。谢谢，这帮助我解决了Openlayers上的一个长期问题，使用自定义WMS加载程序，用户可以更改加载图像的亮度、对比度和alpha。