[求助] 安卓 web 往 canvas 上同时画多个较大图片导致的黑屏问题

[xiaoming1992]

由于业务需要，必须要将多张(4-8 张)图片(大小为 4096*2048)往 canvas 上画，并会经常修改图片的 src。

(意即，canvas 上会同时存在多张较大图片)

这时候问题来了，(或许是)由于图片过大过多，部分安卓机型会出现黑屏(黑屏会波及到其他页面，例如该页面运行在微信小程序的 web-view 中，则一旦黑屏，整个小程序都黑了，必须杀掉进程重新打开。)

说实话，原因都没找到，求助。。。

ps: 页面布局仍正常，仍可交互，页面音乐正常播放，按钮正常可点击，只是黑屏看不见。

[wobuhuicode]

不说安卓 webview 了。IOS 的 canvas 多了也会崩。这吃的都是内存啊。

[littleylv]

看看加载图片成 Bitmap 的地方有没有可以优化内存的空间

[xiaoming1992]

@wobuhuicode 没办法，我也知道内存占用大，可是由于图片会经常改变，没办法画在一张画布上。

在微信自带调试面板看了一下，也不算太高，峰值也才七八百 M，平时五六百 M，怎么这么容易崩。

我的红米 note7 能扛一些，同事的小米 8 小米 9 很容易崩。

[gz911122]

@xiaoming1992 五六百已经非常大了

[xiaoming1992]

@gz911122 我的意思是，在手机剩余内存两三个 G 的时候，仍然会崩，难道单个应用内存分配有限制吗？

[xiaoming1992]

崩的都是安卓，苹果较老的机型，如苹果 6(plus)都不会崩。

[momocraft]

有可能用<img>和 alpha 代替吗?

[xiaoming1992]

@momocraft 不可能，做全景的，必须要往 canvas 上画。

[zpxshl]

似乎是因为 gpu 显存不够导致的黑屏?

[momocraft]

那有可能用 css transform 代替吗？

[xiaoming1992]

@zpxshl 显存吗？我有过这方面的猜测，可是移动端显存相关的资料太少了(或许我不会找？)，找不到有用的资料。。。

[xiaoming1992]

@momocraft 我确实没试过，想当然地认为 canvas 都扛不住，css 更不必说，明天去公司试一试。

[xiangyuecn]

这种大图的显示，不光是 web，Android 原生 app 要显示也是要动用精心编写的代码的，不是随随便便就扔过去显示的。虽然图片是几亿像素，但屏幕能显示的范围不是啊，显示多少画多少，这样拆解一下跟小图的显示就应该差不多了。

不知道楼主有没有试过用不在 dom 中的后台 canvas 进行绘制，然后再把这个缓冲 canvas 绘制到显示的 canvas 中，应该会压力小很多。

[zpxshl]

@xiaoming1992 我们产品用的是自研 webview。有次用户反馈过 webview 黑屏。找浏览器内核的同事分析了下说和显存不足有关。然后他们一顿操作就很大的缓解了这个问题，具体我也不清楚了。

[xiaoming1992]

@xiangyuecn https://krpano.com/petapixel/ 人家的理论上可以容纳无限大的图片，但是我自觉没有那样的能力，管理不了那么多的图片啊😂😂😂

[xiaoming1992]

@zpxshl 😂😂😂尤其我这边用的还只是微信小程序的 webview，要处理都只能基于微信来处理。

[momocraft]

css 实现是浏览器优化过的，有可能比自己处理位图省内存

[zongren]

css 可能真的更胜内存呢，尤其是拆分成多张小图，浏览器帮你优化展示哪些图片，隐藏哪些图片

[POPOEVER]

好像是小程序的内存限制

[xiangyuecn]

@xiaoming1992 #15 这个 demo 厉害了，按需显示似乎也是他的基本原则😂