Question

我正在尝试使用chrome扩展程序截取当前页面的屏幕截图，然后在其上绘制一些形状。在我对图像做了这些之后，我将整个事物变成了一个画布，就像它在一起一样，就像我画在它上面的div现在被烘焙到了＆＃39;图像中，它们就是一个在相同的。执行此操作后，我想将画布重新转换为可用于推送到我所拥有的服务的png图像，但是当我使用canvas.toDataURL()来执行此操作时，它创建的图像源是完全透明的。如果我把它作为一个jpeg，它是完全黑色的。

我读过一些关于画布被污染的东西＆＃39;因为我已经为它绘制了一个图像，并且这在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());

它返回的图像数据是：data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ ... ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC，这是一个空白，透明的图像。

Chrome需要做些什么特别的事吗？有什么东西我错过了吗？谢谢，我感谢时间和帮助。

Answer 1

遇到类似问题我找到了解决方案，感谢以下帖子 https://github.com/iddan/react-native-canvas/issues/29

这些方法返回一个promise，因此在填充变量之前需要等待它解析。我的解决方案是设置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(); }

Answer 2

遇到同样的问题，并在此处找到解决方案： https://bugzilla.mozilla.org/show_bug.cgi?id=749824

＆＃34;我可以确认，如果你设置了preserveDrawingBuffer，它就可以了。

var glContextAttributes = {preserveDrawingBuffer：true}; var gl = canvas.getContext（＆＃34; experimental-webgl＆＃34;，glContextAttributes）;＆＃34;

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

canvas toDataURL（）返回透明图像

2 个答案: