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很可能是浮点数,因此需要对他们进行取整,这对提升性能可能有很大帮助(不同浏览器性能差异很大)。

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星星之Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值