h5小游戏实现获取本机图片
本文使用
cocos
引擎
1.1 需求
- 用户通过文件选择框选择图片。
- 将图片内容转换为
Cocos Creator
的纹理 (cc.Texture2D
),将纹理设置到cc.SpriteFrame
并显示到节点中。
1.2 实现步骤
- 创建文件输入框用于获取文件
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 file = input.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
- 读取文件内容并转换成图片
reader.onload = (e) => {const img = new Image();img.onload = () => {cb && cb(img);}img.src = e.target.result as string;
}
- 手动触发input事件,打开文件选择框
input.click();
1.3 完整代码和调用示例
- 完整代码
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();
}
- 调用示例
selectImageFromAlbum((img) => {const texture = new cc.Texture2D();texture.initWithElement(img);const spriteFrame = new cc.SpriteFrame();spriteFrame.setTexture(texture);//sprite:你的精灵组件sprite.spriteFrame = spriteFrame;
});