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

[xiaoming1992]

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

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

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

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

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

可能有些做全景的朋友能看出来，这是全景图，用的 three.js 。跟普通的图片差不多，但是只能往 canvas 上画，没法放<img>上。

尤其一个更棘手的问题是，直接就黑屏了，想通过报错信息来 debug 或者确认问题都很难。

[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 厉害了，按需显示似乎也是他的基本原则😂

[xiaoming1992]

@momocraft @zongren 全景相关的东西我使用的是 three.js ，一个专门处理三维的一个库，相关优化它应该也会有，即使用 css 应该也是用它自带的 css3d 相关功能，我自己搞一个应该还不出来，毕竟还要处理相机相关的东西。

@POPOEVER 问题是我根本无从得知这到底是小程序的内存限制还是安卓的内存限制，还是其他什么问题，因为这只是在部分机型上偶发(虽然频率有些高😂)。


@xiangyuecn 哈哈哈，人家就是专门做全景的，配套设施很完善的，只不过由于他的代码闭源，且必须要在 xml 里面用他的很难用的自创语法，最主要是不能解决我的 [多张 png 叠加] 的需求，所以没办法才自己搞一套的。

[momocraft]

原来 3js 有 css backend 的，没用过

[hahaayaoyaoyao]

@xiaoming1992 试试 aframe

[gz911122]

@xiaoming1992
#5
是的 单个应用有限制

不然内存都被你一个应用吃了,别的还玩啥

[POPOEVER]

@xiaoming1992 小程序和微信是共用内存的，黑屏就是内部错误了，你应该联机调看报错

[solome]

- 图片分辨率过高了，占用内存过多。建议 4096*2048 降一半图片分辨率（ 2048*1024 ）。
- 或者读取 ua，识别不同的设备提供不同的分辨率。比如，识别是 8G 内存的 Android 设备分辨率高些，其他的低分辨率。
- 如果是小程序，确认一下你们除了 web-view 之外，小程序自身是否占用内存过多。
https://realsee.com/ke/ajd6oMOGNQbMBvxY/VwXmPbpLd4kBC1h5hwT7noNuELM9ANlZ/#lianjia

我们做的 每个房源 200 张左右的图片在小程序上都能正常交互。

[wdspro]

@solome 好酷

[xiaoming1992]

@solome 你们的这个很棒，不过说实话，需求不太一样，你可以看看这个 https://m.lmoar.com/vrs/react/index.html?dirname=wkjfarna4njg2ffaskl&uselessparam=1

[xiaoming1992]

@solome 你们那个，在切换的时候会同时存在两张全景图，平时只有一张，而我这边，时时刻刻同时存在 4567 张全景图。

在上一个公司试过做你们那样的，没法处理模型，看过网上的相机拍出来的模型，总会有缺陷，建模渲染成本太高，后来就没搞了。

你们是用的 krpano 吗？旋转和缩放的效果真好，我的自己写的太水了😂

[solome]

@xiaoming1992

"在切换的时候会同时存在两张全景图，平时只有一张"

不是一张，是六张（上下前后左右）也不是那种很长的全景图。

"时时刻刻同时存在 4567 张全景图"

如果用户看不到的区域，图片就不要加载和渲染了。

[xiaoming1992]

@solome 我的意思是，你的例子里是 1*6 张正方形图片，我这边是 5*6 张正方形。。。

[solome]

@xiaoming1992 点位数不是固定的，这边只展示 视野内的那 "1*6 张正方形图片"，看不到的就不要渲染了。可以预加载附近的点位，最多也是 (1+4)*6 张 图片， "4567 张全景图" 不靠谱吧

[xiaoming1992]

@solome 你可以看我 28#给的例子，确实需要同一时刻存在四五六七张全景图(4/5/6/7*6)，这些全景图都是看得到的。。。数张半透明的全景图叠加在一起的。

[xingzhi1990]

请问楼主解决这个问题了吗？我现在也是用 three.js 做全景漫游，图片比较大 8192*4096，同时只有一张，在安卓的 webview 里，特别是微信的 webview 经常出现黑屏。