WebGL－14.截屏操作

本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。

我们会遇到一种情况，渲染好一个场景后，想把他截图下来保存。如何把WebGL的渲染图保存成图片呢。有人会说，右键->图片另存。这是手动方法，我们讲的是要自动方法。比如：渲染一个３Ｄ场景，直接保存成图片。

要将渲染效果保存成图片，光靠Javascript不行，还要靠后台程序支持。后台程序一般用PHP。前台负责采集渲染数据传给后台。后台php负责把数据整理保存成图片。

---

JavaScript采集渲染数据代码

var canvas = document.getElementById('map_canvas');
var w = canvas.width;
var h = canvas.height;
var n=0;
            
var idata = new Uint8Array(4*w*h);
    
gl.readPixels(0,0,w,h,gl.RGBA,gl.UNSIGNED_BYTE,idata);
    
/*readPixels读取像素需要一些时间，为了保证读完再执行下面程序，
  这里可加一些等待界面。等待１～２秒再往下执行。
*/
show_wait();
    
var img_data="imgdata="+JSON.stringify(idata);
    
$.ajax({
        type:"POST",
        url:"saveimg.php?width="+w+"&height="+h,
        data:img_data,
        success:function(retval)
        {
            if(retval!="-1")
            {
               alert("保存图片成功");
            }
            else
            {
               alert("保存图片失败，稍后再试！");
            }
        },
});

---

PHP把数据转换成图片代码

$_img = imagecreatetruecolor(400,200);
$_black = imagecolorallocate($_img,0,0,0);
imagefill($_img,0,0,$_black); 
$idata = json_decode($_POST["imgdata"]);
$i=0;
$w = $_GET["width"];
$h = $_GET["height"];
    
for($y=h;$y>0;$y--)
{
     for($x=0;$x<w;$x++)
     {
         $r = $idata[$i++];
         $g = $idata[$i++];
         $b = $idata[$i++];
         //注意这里我故意跳开了Alpha值
         $i++;
         $color = imagecolorallocate($_img,$r,$g,$b);
         imagesetpixel($_img, $x, $y, $color);
     }
}
    
imagepng($_img,"./temp.png");
imagedestroy($_img);
    
echo '1';