creator 发布web时，打开本地图片

效果图

基础知识

FileReader

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

1. 检测浏览器对FileReader的支持

	if(window.FileReader) {
    	let fr = new FileReader();
    	// add your code here
	} else {
		alert('不支持你的浏览器！！！');
	}

2. 调用FileReader对象的方法
   FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result 属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

3. 处理事件
   FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

多数程序会在 onload (成功读取文件时)，获取 result。

fr.onload = function() {
    this.result;
}

若有不解可查看， FileReader 接口说明

准备工作

在构建 web 版本时，需要在 index.html 文件下增加 input 标签。后面的style主要是为了不让上传文件的div 节点显示在我们的页面中，免得影响我们的页面布局。

<input id="OpenImageFile" type="file" capture="camera" accept="image/*" style="visibility: hidden">

如果需要在项目预览的时候生效，那就需要修改引擎的预览文件 index.jade。
具体的路径一般位于引擎编辑器目录下的 \resources\static\preview-templates。新增代码

<input id="OpenImageFile" type="file" capture="camera" accept="image/*"/>

核心代码

/*
 * @Author: ls
 * @Date: 2021-11-11 10:12:55
 * @LastEditTime: 2021-11-25 09:42:49
 * @LastEditors: ls
 * @Description: 打开本地图片
 * index.html 内添加img标签
 * <input id="OpenImageFile" type="file" capture="camera" accept="image/*" style="visibility: hidden">
 * @FilePath: \demo\assets\Script\OpenImageFile.ts
 */

export default class OpenImageFile {
	/**
	 * 能否重复上传
	 * @returns
	 */
	private static canRepeatUpload() {
		let input_imageFile = document.getElementById('OpenImageFile');
		if (input_imageFile == null) {
			console.error('上传失败！！！');
			return;
		}

		if (input_imageFile.outerHTML) input_imageFile.outerHTML = input_imageFile.outerHTML;

		// @ts-ignore
		if (input_imageFile.value) input_imageFile.value = null;
	}

	/**
	 * 打开文件操作
	 */
	public static openFile(cb) {
		let input_imageFile = document.getElementById('OpenImageFile');
		if (input_imageFile == null) return;

		// 添加需要处理的代码
		input_imageFile.onchange = function (event) {
			// @ts-ignore
			let files = event.target.files;
			let upType = files[0].type;
			if (upType == 'image/gif' || upType.indexOf('image') < 0) {
				alert('只允许上传图片文件！！！');
				OpenImageFile.canRepeatUpload();
				return;
			}

			if (files && files.length > 0) {
				try {
					if (window.FileReader) {
						var fileReader = new FileReader();
						/**将文件读取为DataURL */
						fileReader.readAsDataURL(files[0]);
						// 限制允许上传的图片最大为5m
						if (files[0].size > 1024 * 1024 * 5) {
							alert('文件过大，请重新选择！！！');
							OpenImageFile.canRepeatUpload();
							return;
						}
						/**成功读取 */
						fileReader.onload = function (e) {
							// 读取图片的操作
							if (fileReader.readyState == fileReader.DONE) {
								OpenImageFile.canRepeatUpload();
								let strImg = e.target.result;

								cb && cb(strImg);
							}
						};
					} else {
						alert('不支持你的浏览器！！！');
					}
				} catch (e) {
					alert('文件读取失败，请再试一次！！！');
					OpenImageFile.canRepeatUpload();
					return;
				}
			}
		};

		input_imageFile.click();
	}
}

使用方法

获取选择图片data数据后，赋值给 cc.Texture2D 初始化贴图，然后再将贴图用于新建 cc.SpriteFrame 精灵帧，最后将精灵帧赋予 cc.Sprite 精灵。

/*
 * @Author: ls
 * @Date: 2021-11-24 17:19:24
 * @LastEditTime: 2021-11-25 09:29:02
 * @LastEditors: ls
 * @Description: HelloWorld
 * @FilePath: \demo\assets\Script\HelloWorld.ts
 */

import OpenImageFile from './OpenImageFile';

const { ccclass, property } = cc._decorator;

@ccclass
export default class HelloWorld extends cc.Component {
	@property(cc.Sprite)
	content: cc.Sprite = null;

	onCallBack() {
		OpenImageFile.openFile(this.setContent.bind(this));
	}

	/**
	 * 设置图片
	 * @param strImg
	 */
	setContent(strImg) {
		let img = new Image();
		img.src = strImg;

		let texture2D = new cc.Texture2D();
		texture2D.initWithElement(img);

		let spriteFrame = new cc.SpriteFrame(texture2D);
		this.content.spriteFrame = spriteFrame;
	}
}

源码

Gitee
CSDN