将Empscripten webGL画布另存为JS中的图像

托马斯·安德列(Tomas Andrle)

我有一个Emscripten驱动的webGL画布,需要将其保存为Javascript处理程序中的图像。假设有一个简单的JS“保存”按钮。

<script type="text/javascript">
var Exporter = {
    preRun: [],
    postRun: [],
    save: function() {
    var c=Module.canvas;
    var d=c.toDataURL("image/png");
    var w=window.open('about:blank','image from canvas');
    w.document.write("<img src='"+d+"' alt='from canvas'/>");
    }
};
</script>
<input type="button" value="Save" onclick="Exporter.save()" />

默认情况下,webGL上下文将preserveDrawingBuffer设置为false,因此生成的图像为空白。

为了使图像显示渲染的WebGL场景,我需要preserveDrawingBuffer: true在编译的Empscripten代码内添加到getContext调用中传递的属性。我可以通过手工编辑已编译的empscripten js代码来完成此操作;这样生成的图像就正确了,但是我想避免这种情况-每次重新编译后都必须这样做。

有没有更容易和更清洁的方式来添加preserveDrawingBufferwebGLContextAttributes从外部?即作为的编译选项emcc,C代码中的某些SDL参数还是托管页面中的Javascript?

更新参见下面的解决方案。我遇到的一个不相关的问题是,保存的图像的位深度较低,抗锯齿的线条看起来很糟糕。使用c.toDataURL( "image/jpeg" )解决了。

man

好吧,首先,所有emscripten及其所有库都是开源的,因此您可以直接进行更改。

特别是复制library_gl.js到您的项目文件夹,然后删除-lGL并添加--js-library library_gl.js到您的构建脚本中,然后您就可以修改本地文件library_gl.js以执行您想要的任何事情。

否则我一点都不了解SDL,但是您可以在调用脚本代码之前自己获取上下文。画布只能具有一个上下文,如果getContext再次调用相同类型的上下文,则将获得相同的上下文。换句话说,如果您的JavaScript首先创建了上下文,则脚本代码将获得相同的上下文

所以这应该工作

 theCanvasElement.getContext("webgl", {preserveDrawingBuffer: true});

 ... now execute emscripten and have it use `theCanvasElement`

如果您甚至无法做到,则可以覆盖 getContext

HTMLCanvasElement.prototype.getContext = (function(oldGetContextFn) {
  return function(type, attrs) {
    attrs = attrs || {};
    if (type === "webgl") {
      attrs.preserveDrawingBuffer = true;
    }
    return oldGetContextFn.call(this, type, attrs);
  };
}(HTMLCanvasElement.prototype.getContext));

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章