Unity webgl 获取图片或视频数据

已于 2025-04-20 16:19:55 修改
阅读量318 收藏
点赞数 1
分类专栏： Unity工具 文章标签： unity webgl lucene
于 2025-04-19 11:37:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44238530/article/details/147348191
版权

这一版有部分问题，使用最下面的…

WebFilePicker.jslib (放在Plugins目录)

var WebFilePickerLibrary = {
	/**
	 * 从浏览器中获取文件并发送给 Unity WebGL 应用程序。
	 * @param {number} objectNamePtr - Unity 对象名称的指针。
	 * @param {number} funcNamePtr - Unity 回调函数名称的指针。
	 * @param {number} fileTypePtr - 允许的文件类型字符串的指针。
	 * @param {number} allowMultiple - 是否允许多选（1 表示允许多选，0 表示单选）。
	 * @param {number} maxSizeMB - 文件大小限制（单位：MB）。如果 <=0，则无限制。
	 */
	getFileFromBrowser: function(objectNamePtr, funcNamePtr, fileTypePtr, allowMultiple, maxSizeMB) {
		var objectName = UTF8ToString(objectNamePtr);
		var funcName = UTF8ToString(funcNamePtr);
		var fileType = UTF8ToString(fileTypePtr);
		var maxSizeBytes = maxSizeMB > 0 ? maxSizeMB * 1048576 : 0;

		var input = document.createElement("input");
		input.type = "file";
		input.multiple = !!allowMultiple; // 转换为布尔值
		input.accept = fileType;
		input.style.display = "none";

		/**
		 * 处理通用文件
		 * @param {File[]} files - 用户选择的文件列表。
		 */
		var handleFiles = function(files) {
			var results = [];
			var filesProcessed = 0;

			for (let i = 0; i < files.length; i++) {
				const file = files[i];

				// 检查文件大小限制
				if (maxSizeBytes > 0 && file.size > maxSizeBytes) {
					SendMessage(objectName, funcName,
						`error:File '${file.name}' exceeds limit (${(file.size / 1048576).toFixed(1)}MB/${maxSizeMB}MB)`);
					return;
				}

				const reader = new FileReader();
				reader.onload = (e => {
					results.push({
						name: file.name,
						type: file.type,
						data: new Uint8Array(e.target.result)
					});

					filesProcessed++;

					// 所有文件处理完毕时发送结果
					if (filesProcessed === files.length) {
						var resultData = results.map(result => {
							return {
								name: result.name,
								type: result.type,
								data: Array.from(result.data)
							};
						});
						SendMessage(objectName, funcName, JSON.stringify(resultData));
					}
				});

				reader.readAsArrayBuffer(file);
			}
		};

		// 监听文件选择事件
		input.addEventListener('change', function(evt) {
			const files = evt.target.files;
			if (!files || files.length === 0) {
				SendMessage(objectName, funcName, "error:No file selected");
				return;
			}
			handleFiles(files);
		});

		// 触发文件选择对话框
		document.body.appendChild(input);
		input.click();
		document.body.removeChild(input);
	}
};

mergeInto(LibraryManager.library, WebFilePickerLibrary);

WebFilePicker.cs

using System;

namespace MYTOOL
{
    [Serializable]
    public class FileResult
    {
        public string name;     // 文件名称
        public string type;    // MIME 类型
        public byte[] data;    // 二进制数据
    }


    /// <summary>
    /// 提供与Unity WebGL平台交互的方法，用于从浏览器中获取文件(图片、视频或其他类型)
    /// </summary>
    public static class WebFilePicker
    {
        public const string IMAGE_FILE_TYPE = "image/*";
        public const string VIDEO_FILE_TYPE = "video/*";


#if UNITY_WEBGL
        [System.Runtime.InteropServices.DllImport("__Internal")]
        private static extern void getFileFromBrowser(string objName, string methodName, string fileType, bool allowMultiple, int maxSizeMB);
#endif


        /// <summary>
        /// 从浏览器中获取图片文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetImageFromBrowser(string objName, string methodName, int maxSizeMB = 0)
        {
            GetFileFromBrowser(objName, methodName, IMAGE_FILE_TYPE, maxSizeMB);
        }

        /// <summary>
        /// 从浏览器中获取多个图片文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetImagesFromBrowser(string objName, string methodName, int maxSizeMB = 0)
        {
            GetFilesFromBrowser(objName, methodName, IMAGE_FILE_TYPE, maxSizeMB);
        }

        /// <summary>
        /// 从浏览器中获取视频文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetVideoFromBrowser(string objName, string methodName, int maxSizeMB = 0)
        {
            GetFileFromBrowser(objName, methodName, VIDEO_FILE_TYPE, maxSizeMB);
        }

        /// <summary>
        /// 从浏览器中获取任意类型的文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="fileType">文件类型</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetFileFromBrowser(string objName, string methodName, string fileType, int maxSizeMB = 0)
        {
#if UNITY_WEBGL && !UNITY_EDITOR
            getFileFromBrowser(objName, methodName, fileType, false, maxSizeMB);
#else
            UnityEngine.Debug.LogError("only implemented for WebGL platform.");
#endif
        }

        /// <summary>
        /// 从浏览器中获取多个任意类型的文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="fileType">文件类型</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetFilesFromBrowser(string objName, string methodName, string fileType, int maxSizeMB = 0)
        {
#if UNITY_WEBGL && !UNITY_EDITOR
            getFileFromBrowser(objName, methodName, fileType, true, maxSizeMB);
#else
            UnityEngine.Debug.LogError("only implemented for WebGL platform.");
#endif
        }
    }
}

使用：调用WebFilePicker里提供的方法，回调时返回json字符串，反序列化为FileResult即可拿到原始数据。
注意：mime_type => type
在这里插入图片描述
效果：
在这里插入图片描述

统一格式返回(数组)
WebFilePicker.jslib (放在Plugins目录)

var WebFilePickerLibrary = {
    /**
     * 从浏览器中获取文件并发送给 Unity WebGL 应用程序。
     * @param {number} objectNamePtr - Unity 对象名称的指针。
     * @param {number} funcNamePtr - Unity 回调函数名称的指针。
     * @param {number} fileTypePtr - 允许的文件类型字符串的指针。
     * @param {number} allowMultiple - 是否允许多选（1 表示允许多选，0 表示单选）。
     * @param {number} maxSizeMB - 文件大小限制。如果<=0则无限制。
     */
    getFileFromBrowser: function (objectNamePtr, funcNamePtr, fileTypePtr, allowMultiple, maxSizeMB) {
        var objectName = UTF8ToString(objectNamePtr);
        var funcName = UTF8ToString(funcNamePtr);
        var fileType = UTF8ToString(fileTypePtr);
        var maxSizeBytes = maxSizeMB > 0 ? maxSizeMB * 1048576 : 0;

        var inputFile = document.createElement("input");
        inputFile.type = "file";
        inputFile.multiple = !!allowMultiple; // 转换为布尔值
        inputFile.accept = fileType;
        inputFile.style.display = "none";

        // 标记是否已完成操作
        let isHandled = false;

        /**
         * 处理通用文件
         * @param {File[]} files - 用户选择的文件列表。
         */
        var handleFiles = function (files) {
            var results = [];
            var filesProcessed = 0;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];

                // 检查文件大小限制
                if (maxSizeBytes > 0 && file.size > maxSizeBytes) {
                    var errorResult = [{
                            result: -3,
                            name: file.name,
                            type: file.type,
                            data: []
                        }
                    ];
                    SendMessage(objectName, funcName, JSON.stringify(errorResult));
                    return;
                }

                const reader = new FileReader();
                reader.onload = (e => {
                    results.push({
                        result: 0,
                        name: file.name,
                        type: file.type,
                        data: Array.from(new Uint8Array(e.target.result))
                    });

                    filesProcessed++;

                    // 所有文件处理完毕时发送结果
                    if (filesProcessed === files.length) {
                        SendMessage(objectName, funcName, JSON.stringify(results));
                    }
                });

                reader.onerror = () => {
                    var errorResult = [{
                            result: -2,
                            name: file.name,
                            type: file.type,
                            data: []
                        }
                    ];
                    SendMessage(objectName, funcName, JSON.stringify(errorResult));
                };

                reader.readAsArrayBuffer(file);
            }
        };

        // 监听文件选择事件
        inputFile.addEventListener('change', function (evt) {
            isHandled = true;
            const files = evt.target.files;

            if (files.length > 0) {
                handleFiles(files);
            } else {
                var cancelResult = [{
                        result: -1,
                        name: "",
                        type: "",
                        data: []
                    }
                ];
                SendMessage(objectName, funcName, JSON.stringify(cancelResult));
            }

            // 清理 focus 监听器
            window.removeEventListener('focus', onFocus);
        });

        // 定义 focus 事件的回调函数
        var onFocus = () => {
            setTimeout(() => {
                if (!isHandled) {
                    var cancelResult = [{
                            result: -1,
                            name: "",
                            type: "",
                            data: []
                        }
                    ];
                    SendMessage(objectName, funcName, JSON.stringify(cancelResult));
                }
            }, 200);
        };

        // 监听窗口焦点事件（部分浏览器取消选择后会触发）
        window.addEventListener('focus', onFocus, {
            once: true
        });

        // 触发文件选择对话框
        document.body.appendChild(inputFile);
        inputFile.click();
        document.body.removeChild(inputFile);
    }
};

mergeInto(LibraryManager.library, WebFilePickerLibrary);


using System;

namespace MYTOOL
{
    [Serializable]
    public class FileSelectionResult
    {
        /// <summary>
        /// <para> 0 正常</para>
        /// <para>-1 取消</para>
        /// <para>-2 加载错误</para>
        /// <para>-3 文件大小超出限制</para>
        /// </summary>
        public int result;

        /// <summary>
        /// 文件名称
        /// </summary>
        public string name;

        /// <summary>
        /// MIME 类型
        /// </summary>
        public string type;

        /// <summary>
        /// 二进制数据
        /// </summary>
        public byte[] data;

        /// <summary>
        /// 是否操作成功
        /// </summary>
        public bool IsSuccess => result == 0;

        /// <summary>
        /// 用户是否取消了操作
        /// </summary>
        public bool IsCancelled => result == -1;

        /// <summary>
        /// 是否发生加载错误
        /// </summary>
        public bool IsLoadError => result == -2;

        /// <summary>
        /// 文件大小是否超出限制
        /// </summary>
        public bool IsSizeExceeded => result == -3;

        /// <summary>
        /// 获取状态描述信息
        /// </summary>
        public string StatusMessage =>
            result switch
            {
                0 => "操作成功",
                -1 => "用户取消",
                -2 => "加载错误",
                -3 => "文件大小超出限制",
                _ => "未知状态"
            };

        /// <summary>
        /// 判断是否有文件数据
        /// </summary>
        public bool HasFileData => data != null && data.Length > 0;

        /// <summary>
        /// 获取文件大小（以字节为单位），如果 data 为空则返回 0
        /// </summary>
        public long GetFileSize() => data?.Length ?? 0;
    }


    /// <summary>
    /// 提供与Unity WebGL平台交互的方法，用于从浏览器中获取文件(图片、视频或其他类型)
    /// </summary>
    public static class WebFilePicker
    {
        public const string IMAGE_FILE_TYPE = "image/*";
        public const string VIDEO_FILE_TYPE = "video/*";


#if UNITY_WEBGL
        [System.Runtime.InteropServices.DllImport("__Internal")]
        private static extern void getFileFromBrowser(string objName, string methodName, string fileType, bool allowMultiple, int maxSizeMB);
#endif


        /// <summary>
        /// 从浏览器中获取图片文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetImageFromBrowser(string objName, string methodName, int maxSizeMB = 0)
        {
            GetFileFromBrowser(objName, methodName, IMAGE_FILE_TYPE, maxSizeMB);
        }

        /// <summary>
        /// 从浏览器中获取多个图片文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetImagesFromBrowser(string objName, string methodName, int maxSizeMB = 0)
        {
            GetFilesFromBrowser(objName, methodName, IMAGE_FILE_TYPE, maxSizeMB);
        }

        /// <summary>
        /// 从浏览器中获取视频文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetVideoFromBrowser(string objName, string methodName, int maxSizeMB = 0)
        {
            GetFileFromBrowser(objName, methodName, VIDEO_FILE_TYPE, maxSizeMB);
        }

        /// <summary>
        /// 从浏览器中获取任意类型的文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="fileType">文件类型</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetFileFromBrowser(string objName, string methodName, string fileType, int maxSizeMB = 0)
        {
#if UNITY_WEBGL && !UNITY_EDITOR
            getFileFromBrowser(objName, methodName, fileType, false, maxSizeMB);
#else
            UnityEngine.Debug.LogError("only implemented for WebGL platform.");
#endif
        }

        /// <summary>
        /// 从浏览器中获取多个任意类型的文件
        /// </summary>
        /// <param name="objName">Unity对象名称</param>
        /// <param name="methodName">Unity回调方法名称</param>
        /// <param name="fileType">文件类型</param>
        /// <param name="maxSizeMB">文件大小限制。如果为0则无限制</param>
        public static void GetFilesFromBrowser(string objName, string methodName, string fileType, int maxSizeMB = 0)
        {
#if UNITY_WEBGL && !UNITY_EDITOR
            getFileFromBrowser(objName, methodName, fileType, true, maxSizeMB);
#else
            UnityEngine.Debug.LogError("only implemented for WebGL platform.");
#endif
        }
    }
}
【Unity3D小技巧】Unity3D中打包WEBGL后读取本地文件数据
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
09-30 1万+
有粉丝问我，怎么在打包后WEBGL读取本地文件数据呢？//文件流形式读取文档 using(FileStream fs = File . OpenRead(path)) {} } }运行后也没有问题：然后打包WEBGL：报错：无法找到路径，其实不是路径的问题，而是WEBGL不支持IO接下来，就来说一下WEBGL读取本地文件的方法吧。
Unity WebGL端选择浏览本地图片并在界面显示
bxe9527的博客
12-01 4745
Unity WebGL端选择浏览本地图片并在界面显示
Unity3D中打包WEBGL后读取本地文件数据+网络请求
weixin_39348384的博客
06-20 3754
PS:博主在上编文章中写道webgl读取本地文件数据以及内部网络请求，在这里详细补充一下PS:博主在上编文章中写道webgl读取本地文件数据以及内部网络请求，在这里详细补充一下首先上一编博主运行html之后报的错误：提示内存不足！！！！1.首先排查一下webgl包的大小，不能超过2G。2.F12查看具体错误，在这里博主的是：a:本地读取StreamingAssets里的配置文件，序列化失败。b:网络请求方法不能使用JsonConvert.SerializeObject将对象重新序列化，
【Unity实战】WebGL读取本机硬盘上的文件
u012587406的博客
12-26 1428
本文假设你要在Unity做一个头像上传的功能，这里我提供一个通过Unity和JavaScript实现的方法。
Unity Webgl本地打开的配置文件
09-08
unity打包webgl在本地浏览器打不开？可以查看我的文档，并下载此配置文件即可实现本地浏览unity网页
【100个 Unity实用技能】☀️ | Unity读取本地文件(Json,txt等)的三种方法示例
热门推荐
努力前行，总会成为自己心中的那道光
08-29 8万+
在Unity中经常会用到读取本地文件的方法，所以本篇文章写了两种简单的方法做示例来看一下，如果有更方便的方法也希望看到本文的小伙伴在评论区补充一下哦！
unity 发布WebGL 读取streamingAssets文件夹内的TXT 遇到的问题
weixin_39114763的博客
12-21 1427
读取的文件路径上代码。
Unity 允许WebGL从本地载入资源
YJE的博客
01-16 4427
https://www.cnblogs.com/twaver/p/3710941.html
Unity +Webgl+AVProVideo+海康监控M3U8取码流+XChart
weixin_39348384的博客
05-22 4311
Unity +Webgl+AVProVideo+海康监控M3U8取码流+XChart
Unity WebSocket WebGL 教程
最新发布
m0_74822999的博客
12-13 670
是一个混合型的WebSocket实现，专为Unity 3D设计，它支持在原生平台和WebGL平台之间自动编译不同的实现方式。对于原生环境，该库依赖于WebSocketSharp，而WebGL则利用自定义的emscripten JSLIB来实现WebSocket通信。值得注意的是，此客户端默认仅支持二进制消息传输，处理字符串消息时需手动进行字节数组的转换。
unity文件存储与读写
04-27
NULL 博文链接：https://ligang7895123.iteye.com/blog/2378231
Unity在exe、webgl读取StreamingAsset文件.unitypackage
12-19
unity 打包出exe和webgl后读取streamingAsset中的文件，方便外部修改。文本、json、csv等格式需要时utf-8不带bom格式
unityWebgl文件选择.unitypackage
12-25
unity打包webgl后，唤醒文件选择器，选择文件，下载Txt 注意：1、目前支持的文件选择格式：txt、json、scv、图片、音频 2、音频格式需要自己设置 2、只能下载txt文件，内容自己编写
Unity发布WebGl逐行读取本地文本文件
li727507857的博客
05-05 1万+
Unity发布成WebGL可以用chrome打开，之前有提到过。那么如何在WebGl中逐行读取本地的文本文件呢？ 之前在网上有了解到可以利用WWW进行文件读取，发现读取后只能转换为string类型，我需要将其进行逐行处理，应该怎么办呢？经过一番搜寻，终于实现了文本文件的读取，核心代码如下： using UnityEngine; using System.Collections; public
关于Unity打WebGL包的一点点坑————读取本地文件不了
qq_43667985的博客
07-14 2850
最近使用Unity打webGl包，碰到一个贼坑贼坑的问题。数据读取不出来，导致程序后面直接运行崩溃。我以为是浏览器的内存的问题。知道今天，才发现贼坑。WebGL是不能通过File.ReadAllLines(path, Encoding.Default); 还有 www形式加载本地文件的。 解决方案： 用个string类型接收你本地文本内容。 可以用 一个字符分割每行。比如 * ，再用其他的符号比如 / ￥$进行再次切割 一样可以达到读行读取数据效果 string s = "张三/13/江西省/1$3$4$
Unity发布WebGL之后读取StreamingAssets文件路径数据
梦丶初寒
04-15 1万+
Unity打包WebGL之后保留了StreamingAssets文件夹，但是使用Application.streamingAssetsPath是无法读取到StreamingAssets文件路径的。为了能正确读取到本地StreamingAssets文件的数据，我们需要使用到UnityWebRequest类。 UnityWebRequest 由三个元素组成 UploadHandler 处理数据...
解决unity3d 多平台下完美本地文本文件读取的方法
Kt_KID的专栏
08-25 960
unity3d可以把游戏发布在很多游戏平台下，但unity3d在不同的运行平台下，本地文件路径是不一样的，这样给我们用给应用配置的本地文本文件的读取带来不小的麻烦，要要把不同的平台来写出不同的路径，特别是android 平台下就更麻烦了。 　　在网上转了很久，终于看到老外有个比较完美的解决办法，不敢独美，分享一下，其实很简单，就是写脚本的时候声明一个公共 TextAsset 类型变量;然后在
WebGl 读取StreamingAssets 文件夹
weixin_45264477的博客
05-28 1394
public static class StreamingAssetPathConfigReader { /// <summary> /// 读取StreamingAsset中的配置文件 /// </summary> /// <param name="configName"></param> /// <param name="action"></param> /// <return...
Unity WebGL下读取Excel
D_kkkk的博客
04-23 912
Unity WebGL下读取Excel。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值