Cocos Creator 国旗头像生成器，源码奉上！
- 2019 年 10 月 8 日
- 筆記
关注「编程小王子」公众号回复【头像生成器】获得源码！
下面我重点介绍一下Cocos Creator H5 头像生成的实现方法。
- 获取手机相册图片
- 在 Cocos Creator 中加载相册图片
- Cocos Creator 屏幕截图
- 使用HMTL显示截屏图片
- 保存图片到相册
1. 获取相册图片
要获取手机相册图片，需要使用浏览器 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);
2. 在 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的图片，你会发现直接在手机上使用手机拍的高清图片显示出来是一片黑色。
3. 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 元素的位置，将它放到浏览器屏幕中间。
4. 保存图片到相册
Cocos Creator 引擎在浏览器上是不能写文件的，因此我们上面是将图片用HTML img 显示，而不是用Sprite显示。我们在手机上长按 img 元素就可以调出浏览器的保存菜单了，在桌面浏览器上可以鼠标右键保存，也可以直接拖动到桌面上。
小结
使用 Cocos Creator 不仅可以开发游戏，也能制作有效的小应用，如果在头像上加载一些Shader特效是不是会更酷呢？
