专栏首页Creator星球游戏开发社区Cocos Creator 国旗头像生成器,源码奉上!

Cocos Creator 国旗头像生成器,源码奉上!

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

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

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

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

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cocos creator | 用摄像机实现残影幻影拖尾效果

    利用摄像机拍摄角色,然后投影到多个显示画布,给画布节点设置不同的透明度,最后让画布节点跟随角色移动。

    张晓衡
  • CocosCreator基础教程—color属性的妙用

    在CocosCreator中巧妙利用节点的color属性,改变精灵的颜色,可以有效减少美术资源。我们一起来看看CocosCreator的HelloWorld工程...

    张晓衡
  • Cocos实现对ETC2的支持

    在深圳Cocos沙龙上,有幸结识了社区中大名顶顶的Colin,Shawn在在论坛上第一次看到Colin的团队用CocosCreator制作的《热血暗黑》时就被深...

    张晓衡
  • TensorFlow学习笔记--Deep Dream模型

    Deep Dream是谷歌推出的一个有意思的技术。在训练好的CNN上,设定几个参数就可以生成一张图象。具体目标是:

    喵叔
  • 居中详解

     讲解 1,单行文本的居中:           <div class='center'><span>单行文本框居中</span></div>         ...

    欲休
  • 【Wolfram|Alpha Notebook Edition】像W|A一样简单易用,像Mathematica一样强大

    Wolfram|Alpha 在学生群体中深受欢迎,是很多在校大学生和高中生探索未知的一大法宝。通常,学生每输入一个问题,Wolfram|Alpha 给出一个(通...

    WolframChina
  • VBA实战技巧06: 复制文本到剪贴板

    注意,上述代码运行前需要添加对“Microsoft Forms 2.0 Object Library”库的引用,方法是在VBE中单击菜单“工具——引用”,在“引...

    fanjy
  • 人工稚能之sklearn数据降维

    机器学习模型拟合的输入数据往往是多维数据,这个维度可能会非常庞大。比如统计一篇文章中的单词频率,就可以把文章看成单词的向量。而单词的数量又是非常庞大,每个单词都...

    老钱
  • 快速完成(图片旋转,查看原图)

    一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图。   主要使用的是jQuery的delegate()方法实现图片旋转,该...

    赵小忠
  • 数据分析-如何重命名Pandas DataFrame中的列名?

    DataFrames和Series是用于数据存储的pandas中的两个主要对象类型:DataFrame就像一个表,表的每一列都称为Series。您通常会选择一个...

    亚乐记

扫码关注云+社区

领取腾讯云代金券