egret截屏生成图片耗时优化

带你解决egret截屏生成图片非常耗时的问题
先说结论：优化后，生成图片的性能提升30%–10000%（看不同浏览器和图片尺寸）

一般截屏功能核心代码：

var renderTexture:egret.RenderTexture = new egret.RenderTexture();
renderTexture.drawToTexture(con ,null, 1);
renderTexture.saveToFile(image/png, test.png);

核心api一个是drawToTexture，另一个是 saveToFile，通过分析调用堆栈，发现是
saveToFile—> eliFoTevas—>toDataURL–>convertImageToCanvas ，最终定位到是egret.web.js文件下convertImageToCanvas这个方法很慢，而这个方法慢主要是由于以下2个循环造成：
convertImageToCanvas方法

//从RenderTexture中读取像素数据，填入canvas
var pixels = renderTexture.$renderBuffer.getPixels(rect.x, rect.y, iWidth, iHeight);
var imageData = new ImageData(iWidth, iHeight);
for (var i = 0; i < pixels.length; i++) {
    imageData.data[i] = pixels[i];
}
sharedContext.putImageData(imageData, 0, 0);

renderTexture.$renderBuffer.getPixels方法

//图像反转
var result = new Uint8Array(4 * width * height);
for (var i = 0; i < height; i++) {
    for (var j = 0; j < width; j++) {
        var index1 = (width * (height - i - 1) + j) * 4;
        var index2 = (width * i + j) * 4;
        var a = pixels[index2 + 3];
        result[index1] = Math.round(pixels[index2] / a * 255);
        result[index1 + 1] = Math.round(pixels[index2 + 1] / a * 255);
        result[index1 + 2] = Math.round(pixels[index2 + 2] / a * 255);
        result[index1 + 3] = pixels[index2 + 3];
    }
}
return result;

为什么要这个图片反转代码？原因是从webgl.getPixels获得的图片数据，顺序是反的，需要对图片数据进行垂直翻转。当width和height都很大的时候（>1000像素）这个循环会达到百万千万次，这个运算非常耗时。

知道原因，解决起来就比较简单了，这里分享下思路。

如果是app，可以借助java代码来做翻转，修改引擎代码把这部分图片翻转代码去掉，egret把生成的不正常的图片的base64传给java生成bitmap图片，java再对bitmap图片进行垂直翻转得到正常的图片。
如果是小游戏，仍然优化上面代码，把上面图片翻转和ImageData赋值的2个循环代码进行整合，减少运算次数。另外一个容易忽略的是 width和height很可能是浮点数，因此需要对他们进行取整，这对提升性能可能有很大帮助（不同浏览器性能差异很大）。

通过以上优化，基本解决了生成图片耗时的问题。

egret截屏生成图片耗时优化

Java相关栏目本月热门文章