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/*";
  1. 监听文件选择事件
input.onchange = () => {//检查是否有选中文件if (!input.files || !input.files[0]) return;//存储文件const file = input.files[0];
}
  1. 读取文件内容
const file = input.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
  1. 读取文件内容并转换成图片
reader.onload = (e) => {const img = new Image();img.onload = () => {cb && cb(img);}img.src = e.target.result as string;
}
  1. 手动触发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();
}
  1. 调用示例
selectImageFromAlbum((img) => {const texture = new cc.Texture2D();texture.initWithElement(img);const spriteFrame = new cc.SpriteFrame();spriteFrame.setTexture(texture);//sprite:你的精灵组件sprite.spriteFrame = spriteFrame;
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java设计模式 - 装饰者模式

装饰者模式(Decorator Pattern)是一种结构型设计模式,它允许向一个现有的对象添加新的功能,同时又不改变其结构。这种模式创建了一个装饰类,用来包装原有的类,并在保持原类方法签名的同时,增添了…

高阶云服务-ELB+AS

ELBAS 弹性负载均衡弹性伸缩 原来1台web服务器不满足相应,现部署多台提供相同服务; 由于多个服务器多个ip该如何提供给应用呢? 引申出负载均衡(HAProxy,LVS01四层,Nginx七层) 防单点故障做主备…

【论文阅读】WaDec: Decompiling WebAssembly Using Large Language Model

论文阅读笔记:WaDec: Decompiling WebAssembly Using Large Language Model 1. 来源出处 论文标题: WaDec: Decompiling WebAssembly Using Large Language Model作者: Xinyu She, Yanjie Zhao, Haoyu Wang会议: 39th IEEE/ACM International Conference on Automated Softwar…

Nginx参数配置-笔记

文章目录 upstream实现后台应用服务负载均衡&高可用proxy_set_header参数 upstream实现后台应用服务负载均衡&高可用 角色IPnginx172.168.110.2后端应用服务1172.168.110.3后端应用服务2172.168.110.4后端应用服务3(备用)172.168.110.5 示例如下: upstre…

STM32学习笔记----UART、IIC、SPI的区别

在STM32微控制器中,UART(通用异步收发传输器)、I2C(串行外设接口)和SPI(串行外设接口)是三种常见的通信协议。它们各自有不同的用途、特性和工作方式。它们的基本区别在于通信协议、数据传输方式…

Go小记:使用Go实现ssh客户端

一、前言 SSH(Secure Shell)是一种用于在不安全网络上安全访问远程计算机的网络协议。它通过加密的方式提供远程登录会话和其他网络服务,保证通信的安全性和数据的完整性。 本文使用golang.org/x/crypto/ssh包来实现SSH客户端 可以通过go …

html中select标签的选项携带多个值

搜索参考资料&#xff1a;SELECT标签中的选项可以携带多个值吗&#xff1f; 【摘抄】&#xff1a; 它可能有一个select选项中的多个值&#xff0c;如下所示。 <select id"ddlEmployee" class"form-control"> <option value"">-- S…

oracle导入线上数据的全步骤

多租户架构允许oracle数据库成为一个多租户的容器数据库&#xff0c;也就是CDB&#xff0c;container database&#xff0c;与之相对应的&#xff0c;则是插入到这个容器里面的可插拔式数据库&#xff0c;pluggable database 一个CDB可以包含0&#xff0c;1或者多个用户创建的…

华为刷题笔记--题目索引

文章目录 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记简单题目 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分&#xff1a; 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新&#xff0c;订阅防丢失 简单题目 –题目分值试卷1华为OD机…

从零开始学习 sg200x 多核开发之 eth0 MAC 地址修改

在 sophpi 中&#xff0c;默认网卡 eth0 的 MAC 地址未配置&#xff0c;是随机生成的。这样就会导致每次重启之后&#xff0c;MAC 地址会改变&#xff0c;从而导致通过 DHCP 获取 IP 地址每次也都在变化。 查看 MAC 地址 前文提到 eth0 自动使能并通过 DHCP 获取 IP 地址&…

网络安全领域的最新动态和漏洞信息

网络安全领域的最新动态和漏洞信息涉及多个方面&#xff0c;以下是对这些信息的详细归纳&#xff1a; 一、网络安全领域最新动态世界互联网大会乌镇峰会召开2024年11月19日至22日&#xff0c;以“拥抱以人为本、智能向善的数字未来——携手构建网络空间命运共同体”为主题的202…

vue中el-select 模糊查询下拉两种方式

第一种&#xff1a;先获取所有下拉数据再模糊查询&#xff0c;效果如下 1&#xff0c;页面代码&#xff1a;speciesList是种类列表List, speciesId 是speciesList里面对应的id&#xff0c;filterable是过滤查询标签 <el-form-item label"种类" prop"species…

华为数字化转型的本质为何是管理变革

随着全球经济的加速数字化转型&#xff0c;企业纷纷进入了数字化时代的大潮。华为作为数字化转型的领军者&#xff0c;已经成功实践了从传统企业向数字化企业的蜕变。对于企业而言&#xff0c;数字化转型不仅仅是新技术的应用&#xff0c;更是一场管理变革。在这场变革的背后&a…

【Linux从青铜到王者】详解ip协议(待完善)

前言 之前我们讲的udp和tcp协议&#xff0c;是处于传输层的协议 而ip协议&#xff0c;是处于传输层下面的网络层的协议 一个报文传输的时候&#xff0c;表面上是一个主机的传输层运输到另一个主机的传输层&#xff0c;本质是其实是由应用层不断向下交付到数据链路层&#xff…

pytorch奇怪错误

ValueError: At least one stride in the given numpy array is negative, and tensors with negative strides are not currently supported. (You can probably work around this by making a copy of your array with array.copy().) 今天在这里遇到了一个奇怪的bug impor…

go-zero(二) api语法和goctl应用

go-zero api语法和goctl应用 在实际开发中&#xff0c;我们更倾向于使用 goctl 来快速生成代码。 goctl 可以根据 api快速生成代码模板&#xff0c;包括模型、逻辑、处理器、路由等&#xff0c;大幅提高开发效率。 一、构建api demo 现在我们通过 goctl 创建一个最小化的 HT…

集群聊天服务器(12)nginx负载均衡器

目录 负载均衡器nginx负载均衡器优势 如何解决集群聊天服务器跨服务器通信问题&#xff1f;nginx的TCP负载均衡配置nginx配置 负载均衡器 目前最多只能支持2w台客户机进行同时聊天 所以要引入集群&#xff0c;多服务器。 但是客户连哪一台服务器呢&#xff1f;客户并不知道哪一…

Springboot+Vue的项目搭建(二)

三个工具 一、Md5加密工具 MD5加密工具是一款用于数据加密的工具&#xff0c;它采用MD5算法将输入的数据转换成一个128位&#xff08;16字节&#xff09;的散列值&#xff08;hash value&#xff09;。以下是对MD5加密工具的详细介绍&#xff1a; MD5&#xff08;Message-Di…

django启动项目报错解决办法

在启动此项目报错&#xff1a; 类似于&#xff1a; django.core.exceptions.ImproperlyConfigured: Requested setting EMOJI_IMG_TAG, but settings are not c启动方式选择django方式启动&#xff0c;以普通python方式启动会报错 2. 这句话提供了对遇到的错误的一个重要线索…

Linux:版本控制器git和调试工具cgdb

✨✨所属专栏&#xff1a;Linux✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 版本控制器 为了能够更⽅便我们管理这些不同版本的⽂件&#xff0c;便有了版本控制器。所谓的版本控制器&#xff0c;就是能让你了解到⼀个⽂件的历史&#xff0c;以及它的发展过程的系统。通俗的讲就是⼀…