canvas toDataURL() 返回透明图片

Posted 2023-03-05

【中文标题】canvas toDataURL() 返回透明图片

【英文标题】：canvas toDataURL() returns transparent image

【发布时间】：2016-05-06 00:15:10

【问题描述】：

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

我读到一些关于画布被“弄脏”的信息，因为我已经为它绘制了一个图像，并且这在 Chrome 中不起作用，但这对我来说没有意义，因为我之前已经让它工作了，但我无法使用我以前的方法。下面是无效的代码 sn-p。我只是在制作画布元素，然后在此之前绘制图像。

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…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAElFTkSuQmCC 这是一个空白的透明图像。

我需要对 Chrome 做些什么特别的事情吗？有什么我想念的吗？谢谢，感谢您的时间和帮助。

【问题讨论】：

当您注释掉在其上绘制矩形的部分时，它是否正确显示屏幕？

@PatrickRoberts 你问我画布是否在没有任何矩形的情况下正确渲染？如果是这样，答案是肯定的，它确实在画布上正确渲染了图像。

除非我能看到你所有的相关代码，否则我真的认为我无能为力。仅此，问题就无法重现。

@PatrickRoberts 我在查看代码时发现了一些其他问题，所以我可能会偶然发现一个修复程序。我无法发布所有代码，对不起。不过，我很感激你的时间。

您是否在控制台中看到安全错误？如果是这样，那就是“污染”问题。如果不是，您可能会在整个图像上绘制矩形，然后填充它们导致图像为空。

【参考方案1】：

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

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

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(); 

【讨论】：

谢谢，这帮助我解决了 Openlayers 上长期存在的问题，使用自定义 WMS 加载器，用户可以更改加载图像的亮度、对比度和 alpha。

【参考方案2】：

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

“我可以确认，如果您设置了 preserveDrawingBuffer，它会起作用。

var glContextAttributes = preserveDrawingBuffer: true ; var gl = canvas.getContext("experimental-webgl", glContextAttributes);"

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

【讨论】：

我也有同样的问题。在 ubuntu chrome 和 FF 中，没有 preserveDrawingBuffer 可以正常工作，但在 Win10 中，chrome 和 Opera 中的 ubuntu 也使用 preserveDrawingBuffer 返回透明图像。非常有趣的是，在 Win10 edge(ie) 中也从画布返回图像，而不是透明的。