在网站

时间:2016-11-24 08:31:28

标签: php unity3d screenshot

我目前正在尝试创建一个功能,该功能可以截取我的页面并将其保存为png文件。问题是,我已尝试过大多数功能,例如imagegrabscreen,htmlcanvas,gitz等,但它似乎并没有检测到我所放置的统一webgl播放器。它只需截取我网站上的css / html脚本。有没有办法解决这个问题?

这里是我团结的代码,我想屏幕截图并保存为png以及Unity播放器下方的按钮以调用屏幕截图功能:



<center><p class="header">Ace Furniture Configurator</p>
    <div class="template-wrap clear">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
      <br>
      <div class="logo"></div>
      <div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
    </div>
    <script type='text/javascript'>
  var Module = {
    TOTAL_MEMORY: 536870912,
    errorhandler: null,			// arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
    compatibilitycheck: null,
    dataUrl: "Release/unity.data",
    codeUrl: "Release/unity.js",
    memUrl: "Release/unity.mem",
    
  };
</script>
<script src="Release/UnityLoader.js"></script><br><input type="submit" value="Take Screenshot" id="btnscreen" name="btnscreen"></center><br><br>
<!-- //configurator -->
&#13;
&#13;
&#13;

我用提交按钮调用的imagegrabscreen函数:

<?php

if(isset($_POST['btnscreen']))
{
    $img = imagegrabscreen();
    imagepng($img, 'screenshot.png');

}

ob_end_flush();
?>

1 个答案:

答案 0 :(得分:1)

所以,我找到了解决方案,对我有用。 首先,您必须为游戏实例激活preserveDrawingBuffer。 (JavaScript的):

/home/rose/Desktop/b/0900Rich/0900Rich.tif
/home/rose/Desktop/b/0900Takaka/0900Takaka.tif
/home/rose/Desktop/b/1000StArn/1000StArn.tif
/home/rose/Desktop/b/1000TakaHWS/1000TakaHWS.tif
/home/rose/Desktop/b/1100AorereVPost/1100AorereVPost.tif

之后,画布的渲染图像被写入DrawingBuffer,您可以使用画布的函数var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress, Module: { webglContextAttributes: {"preserveDrawingBuffer": true}, } }); 来获取它。如果需要(https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL),可以为此功能设置不同的文件格式和质量设置。

因此,在html中创建一个.toDataURL()标记,并在JavaScript中创建一个单击事件监听器(HTML):

<a>

使用WebGL获取canvas元素并使用<a class="" id="btn_download-screenshot" download="myScreenshot.jpg"> Screenshot </a> 函数(JavaScript):

.toDataURL()

使用AJAX和JavaScript将dataURL(图像本身)上传到任何服务器,并根据需要将其保存在那里。