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

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;
});