我目前正在尝试创建一个功能,该功能可以截取我的页面并将其保存为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;
我用提交按钮调用的imagegrabscreen函数:
<?php
if(isset($_POST['btnscreen']))
{
$img = imagegrabscreen();
imagepng($img, 'screenshot.png');
}
ob_end_flush();
?>
答案 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(图像本身)上传到任何服务器,并根据需要将其保存在那里。