h5小游戏实现获取本机图片

本文使用cocos引擎

1.1 需求

1. 用户通过文件选择框选择图片。
2. 将图片内容转换为Cocos Creator的纹理 (cc.Texture2D),将纹理设置到 cc.SpriteFrame 并显示到节点中。

1.2 实现步骤

1. 创建文件输入框用于获取文件

let input = document.createElement("input");
//设置输入框类型为文件
input.type = "file";
//限制输入为图片
input.accept = "image/*";

2. 监听文件选择事件

input.onchange = () => {
	//检查是否有选中文件
	if (!input.files || !input.files[0]) 
		return;
	//存储文件
	const file = input.files[0];
}

3. 读取文件内容

const file = input.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);

4. 读取文件内容并转换成图片

reader.onload = (e) => {
	const img = new Image();
	img.onload = () => {
		cb && cb(img);
	}
	img.src = e.target.result as string;
}

5. 手动触发input事件，打开文件选择框

input.click();

1.3 完整代码和调用示例

1. 完整代码

selectImageFromAlbum(cb) {
	let input = document.createElement("input");
	input.type = "file";
	input.accept = "image/*";
	input.onchange = () => {
		if (!input.files || !input.files[0]) 
			return;
		const file = input.files[0];
		const reader = new FileReader();
		reader.onload = (e) => {
			const img = new Image();
			img.onload = () => {
				cb && cb(img);
			}
			img.src = e.target.result as string;
		}
		reader.readAsDataURL(file);
	}
	input.click();
}

2. 调用示例

selectImageFromAlbum((img) => {
	const texture = new cc.Texture2D();
	texture.initWithElement(img);
	const spriteFrame = new cc.SpriteFrame();
	spriteFrame.setTexture(texture);
	//sprite：你的精灵组件
	sprite.spriteFrame = spriteFrame;
});