使用ort.js的create方法加载onnx模型报错:Fetch API cannot load file…… URL scheme “file“ is not supported.

简介: 使用ort.js的create方法加载onnx模型报错:Fetch API cannot load file…… URL scheme “file“ is not supported.

问题


在html中使用ort.js通过路径的方式加载onnx模型时,如果项目不使用代理直接本地运行,会报以下错误;

Fetch API cannot load file:///storage/……/html/js/Onnxmodel/FSC.onnx. URL scheme "file" is not supported. at /html/js/ort.min.js:4502

11:46:39.103 Uncaught (in promise) TypeError: Failed to fetch at /html/js/ort.min.js:4502

另外,在uniapp中使用webview运行本地html项目并加载onnx模型时,也会出现此错误。

分析


由于使用代理的情况下,通过路径加载模型是没有问题的,初步分析是ort.js文件加载机制原因,具体不做深入探究;所以先通过ort.js文档查看create方法:InferenceSessionFactory Create


通过文档我们可以发现,create方法不仅支持通过路径加载模型,还可以通过buffer的形式

image.png

解决


由于create方法支持buffer,我们就可以通过获取模型的buffer值的方式来加载模型,具体代码如下

可以参考文档:Sending and Receiving Binary Data

 var session;
 var oReq = new XMLHttpRequest();
 oReq.open("GET", "../js/Onnxmodel/test.onnx", true);        // 加载模型,传入路径
 oReq.responseType = "arraybuffer";        // 设置加载的文件返回类型
 oReq.onload = function () {
     var arrayBuffer = oReq.response; // 加载完模型文件后获取到对应buffer
     ort.InferenceSession.create(arrayBuffer).then(function (model) {
         session = model;        // 加载模型后返回会话
     }).catch((err)=>{
         console.log("errrrrrrrrrrrrrrrrrrrr", err)
     });
 } 
 oReq.send(null);
目录
相关文章
|
8月前
|
Web App开发 存储 数据处理
Chrome 下载大文件报错!用 Streamsaver.js 完美填坑
本文探讨了Chrome下载大文件报“网络错误”的原因及解决方案。由于Chrome对Blob数据有大小限制,导致大文件下载失败。通过将responseType改为ArrayBuffer可临时解决1-2G文件问题,但超3G仍会崩溃。最佳方案是使用Streamsaver.js实现流式下载,边接收边保存,避免内存溢出,完美支持超大文件下载。
4743 3
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
515 84
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
328 10
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
437 12
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!