带你解决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很可能是浮点数,因此需要对他们进行取整,这对提升性能可能有很大帮助(不同浏览器性能差异很大)。
通过以上优化,基本解决了生成图片耗时的问题。