zoukankan      html  css  js  c++  java
  • 教你使用Cocos Creator制作国旗头像生成器,附源码!

    关注「编程小王子」公众号回复【头像生成器】获得源码!

    下面我重点介绍一下Cocos Creator H5头像生成的实现方法:

    file

    1. 获取手机相册图片
    2. 在 Cocos Creator 中加载相册图片
    3. Cocos Creator 屏幕截图
    4. 使用HMTL显示截屏图片
    5. 保存图片到相册

    获取相册图片

    要获取手机相册图片,需要使用浏览器 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);     
    		})
    }
    
    1. 创建 img 标签,将读取到的图片设置到 img.src 属性
    2. 创建 cc.Texture2D 对象,加载 img 中的纹理
    3. 当 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特效是不是会更酷呢?

    file

  • 相关阅读:
    nginx + uwsgi 配置参考
    windows 7 下安装VMWARE 和 red-hat 7 64bit
    js jquery select 操作 获取值,选中选项,增加,修改,删除
    css 圆形头像
    css border 三角形
    网页发起qq临时会话
    js 判断字符串中是否包含某个字符串
    jquery 事件的绑定,触发和解绑
    js click 与 onclick 事件绑定,触发与解绑
    jquery 表单序列化
  • 原文地址:https://www.cnblogs.com/creator-star/p/11589051.html
Copyright © 2011-2022 走看看