webgl canvas返回透明图像的toDataURL（） [英] toDataURL() of webgl canvas returning transparent image

问题描述

我无法使用toDataUrl（）来工作。这是我的代码，我正在尝试获取画布的图像并将其用作现有图像元素的源。

I can't get toDataUrl() to work. Here's my code where I'm trying to get an image of the canvas and use it as the source of an existing image element.

var canvas = document.getElementById('glcanvas');
canvas.setAttribute('crossOrigin','anonymous');
var img = document.getElementById('imageToShowCanvas');
img.src = canvas.toDataURL();

什么imageToShowCanvas显示的是一个损坏的网址。当我在console.log中调用toDataUrl（）的结果时，我得到一个显示带有画布高度和宽度的透明图像的链接。

What imageToShowCanvas is showing is a broken url. When I console.log the result of my call to toDataUrl() I get a link showing a transparent image with the height and width of the canvas.

我听说过cors问题导致这样的问题，但是我正在使用带有-allow-file-access-from-files标志的chrome而且没有任何问题控制台中的安全错误。是否有更简单的方法来获取我的webGl画布的屏幕截图？

I've heard of cors problems causing issues like this but I'm using chrome with –allow-file-access-from-files flag and there aren't any security errors in the console. Is there an easier way to get a screenshot of my webGl canvas?

推荐答案

谢谢LJ，我只需要启用preserveDrawingBuffer获取webGl上下文时标记。截图现在完美无缺！

Thank you LJ, I just needed to enable the preserveDrawingBuffer flag when getting the webGl context. Screenshots are now working perfectly!

这篇关于webgl canvas返回透明图像的toDataURL（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！