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

[xiaoming1992]

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

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

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

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

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

[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 经常出现黑屏。