教你使用Cocos Creator制作国旗头像生成器,附源码!
关注「编程小王子」公众号回复【头像生成器】获得源码!
下面我重点介绍一下Cocos Creator H5头像生成的实现方法:
- 获取手机相册图片
- 在 Cocos Creator 中加载相册图片
- Cocos Creator 屏幕截图
- 使用HMTL显示截屏图片
- 保存图片到相册
获取相册图片
要获取手机相册图片,需要使用浏览器 input 标签提供的能力,在桌面浏览器上则是浏览文件目录选择图片。
使用 document 动态创建 input HTML标签,并设置属性为type 为 file,accept 为"image/*",同时使用 CSS 控件一下 input 的位置
let input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.setAttribute('style', 'position:absolute;margin-left:30%;margin-top:50px;-webkit-user-select:file')
document.getElementsByTagName('body')[0].appendChild(input);
当选择好图片后,还需要监听 input 标签的 change 事件,我们好方便获取图片的数据:
let oninput = (e) => {
//拿到文件对象
var file = e.target.files[0];
//读取文件数据
reader = new FileReader();
reader.readAsDataURL(file);
//文件加载成功以后,渲染到页面
reader.onload = (e)=> {
...
}
}
//监听input的change事件
input.addEventListener('change', oninput);
在 Cocos Creator 中加载相册图片
FileReader 的 onload 回调事件中,我们将图片放入 HTML 的 img 标签中
reader.onload = (e)=> {
//创建一个img标签加载图片数据
var img = document.createElement("img");
img.src = e.target.result;
//再通过img转换成Creator的Textures2D对象
let texture = new cc.Texture2D();
texture._nativeAsset = img;
texture.on('load', () => {
//最后设置到精灵上
this.sprite.spriteFrame = new cc.SpriteFrame(texture);
})
}
- 创建 img 标签,将读取到的图片设置到 img.src 属性
- 创建 cc.Texture2D 对象,加载 img 中的纹理
- 当 Textrue2D 的 load 事件完成,就可以显示到精灵组件上了
这里需要注意,Cocos Creator 不能显示超过2048 * 2048的图片,你会发现直接在手机上使用手机拍的高清图片显示出来是一片黑色。
Cocos Creator 屏幕截图
设置头像的前景框非常简单,这里就不多说了,我看怎么把合成的图片保存下来。这里是参考的Cocos Creator的范例合集中capture_to_web的做法,简单修改了一下,点击按钮生成截图:
save () {
//创建 HTML canvas 标签保存图像数据
this.createCanvas();
//将canvas的图数据保存到HTML img元素上
var img = this.createImg();
//显示这个HTML img 元素
this.showImage(img);
this.iconBg.active = true;
this.label.node.active = true;
}
这里生点看下ShowImage这个函数,我在修改了范例合集的作法:
showImage(img) {
//var img = document.createElement("img");
let offset = (cc.view._frameSize.width - this.srpite.node.width) / 2;
let top = (cc.view._frameSize.height - this.srpite.node.width) / 2;
cc.log('fs:', cc.view._frameSize.width);
cc.log('offset:', offset, img.width);
img.setAttribute('style', `position:absolute;margin-left:${offset}px ;margin-top:${top}px`);
document.getElementsByTagName('body')[0].appendChild(img);
this._img = img;
}
上面的代码主要是计算 img 元素的位置,将它放到浏览器屏幕中间。
保存图片到相册
Cocos Creator 引擎在浏览器上是不能写文件的,因此我们上面是将图片用HTML img 显示,而不是用Sprite显示。我们在手机上长按 img 元素就可以调出浏览器的保存菜单了,在桌面浏览器上可以鼠标右键保存,也可以直接拖动到桌面上。
小结
使用 Cocos Creator 不仅可以开发游戏,也能制作有效的小应用,如果在头像上加载一些Shader特效是不是会更酷呢?
原文地址:https://www.cnblogs.com/creator-star/p/11589051.html
- Spring boot with Velocity template
- Oracle 11g R2 RAC 高可用连接特性 – SCAN 详解
- Spring boot · 链接池配置
- Linux下命令行图片格式转换
- 用SQL解一道有趣的数学题:Gauss和Poincare
- OpenSSL 转换证书格式
- 电子邮件服务器DKIM配置
- 自相矛盾:一个进程可以自成死锁么?
- 数据库安全·开发加密插件
- wordpress无法安装这个包。: PCLZIP_ERR_MISSING_FILE (-4) : Missing archive file 'C:WINDOWSTEMP/wordpress-4.
- 数据库安全·数据加密
- Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣
- 数据库安全·Token 认证
- 数据库安全·用户/角色认证
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Web自动化必会「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」
- HTML5 meta viewport参数详解
- 二分查找应该都会,那么二分查找的变体呢?
- TypeScript 实战算法系列(三):实现链表与变相链表
- JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件
- TypeScript 实战算法系列(二):实现队列与双端队列
- VBA位操作
- VBA编写Ribbon Custom UI编辑器07——写入xml
- Linux下在文件夹所有文件中查找相关内容
- archlinux安装篇(一) 基本系统
- git使用要点
- 七夕 - 程序员表白代码
- Shell流程控制
- Shell sed命令
- focus/focusin/focusout