展厅设计公司网站,网站打开很慢,室内装潢设计专业培训,有哪些出名的工业设计网站h5小游戏实现获取本机图片 本文使用cocos引擎 1.1 需求 用户通过文件选择框选择图片。将图片内容转换为Cocos Creator的纹理 (cc.Texture2D),将纹理设置到 cc.SpriteFrame 并显示到节点中。 1.2 实现步骤
创建文件输入框用于获取文件
let input document.createElement( 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;
});
