时间戳

首页 > 解决方案 > 在 iOS Cordova 应用程序中渲染纹理时出现安全错误

ios - 在 iOS Cordova 应用程序中渲染纹理时出现安全错误

问题描述

我正在使用 Cordova 开发一个移动应用程序，其中包含一个 HTML 画布，并且我正在为 3d 环境使用three.js。

当我尝试渲染 3d 环境时，纹理没有被正确渲染；我所有的 3d 对象都显示为黑色。控制台抛出错误说：

THREE.WebGLState: – SecurityError: 操作不安全。—three.min.js:111 q —three.min.js:114:271

这发生在一个 texImate2d 函数中。

我认为这不是 CORS 问题，因为我所有的纹理文件都是应用程序本地的。我正在创建图像对象并使用 cordova.file.applicationDirectory + path 作为加载纹理的源。当我在 Three.js WebGLRenderer 上调用 render() 时，在我加载纹理并将对象添加到场景后发生错误。

更疯狂的是，这在一周前还可以正常工作，而无法加载的纹理似乎是凭空出现的。我没有在应用程序中更改与此相关的任何内容，并且我不知道有任何重大更新。这在 Android 设备上仍然可以正常工作。

我已经对这个问题进行了大量搜索，大多数类似的问题似乎与 CORS 相关，但正如我所说，我不认为这里是这种情况，因为所有纹理文件都是应用程序本地的。有没有人遇到过这个？谢谢！

标签： ioscordovathree.jshtml5-canvasphonegap

解决方案

我终于想通了。对于纹理图像，我使用路径字符串设置图像的 src，这显然是 ios 中的一个安全问题（尽管我仍然不知道为什么它一开始工作然后停止）。

我将其切换为使用 FileSystem API 将图像作为二进制文件读取，然后使用 btoa() 将其转换为 base64，最后将生成的字符串设置为带有前缀“data:image/jpeg;base64”的 src . 现在可以了。

推荐阅读