昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣。

1、canvas

这就不得不提到小程序中的 API canvas,H5 中也是有 canvas 的,不过之前也一直没有机会用,这次正好乘机试试水。

晚上回家看了下官方文档,网上搜了一些类似的功能实现,最后写好了一个 demo,基本上是能初步绘制国旗头像了。

当然以后如果想要绘制其他带挂件的头像,只需要更改挂件素材即可,提前预约帮你们定做今年的圣诞帽。

2、代码来了

实现过程主要分为以下几个步骤:

1、新建 canvas 画板

2、绘制头像当做背景(demo 目前是自行上传头像制作)

3、绘制国旗边框

4、保存到手机相册(需授权)

废话不多说,直接上代码:

// wxml 页面
<view class="container">
<!-- 头像绘制区域 -->
<canvas canvas-id="myAvatar" class="canvas"></canvas> <!-- 按钮 -->
<button class="btn-save" bindtap="upload">上传头像</button>
<button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button>
</view>
// 部分功能 js
// 绘制头像背景
drawAvatar() {
var that = this;
var p = that.data;
context = wx.createCanvasContext('myAvatar', this);
context.drawImage(p.src, 0, 0, 256, 256);
context.draw(true)
context.save();
context.translate(p.hat.x, p.hat.y)
context.scale(p.hat.b, p.hat.b)
context.rotate(p.hat.rotate * Math.PI / 180)
context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)
context.draw(true)
this.setData({
save: true
})
}, // 保存图片
saveImg() {
wx.canvasToTempFilePath({
canvasId: 'myAvatar',
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功'
})
},
fail(res) {
wx.showToast({
title: '取消保存...',
icon: 'none'
})
}
})
}
})
}

3、最后

demo 写完了,以小程序的尿性,怎么会没有坑呢?发现真相的我眼泪差点掉下来,而且这个坑不是一般的坑,弄了老半天都没解决。

具体是啥坑小程序留言区揭晓,感兴趣的欢迎来留言讨论如何解决,到发文为止依旧是个巨坑。

公众号「我是玖柒后」后台回复「头像」即可获取 demo 源码,填坑不忘挖坑人,我太南了。

推荐文章:

小程序九九八十一坑之跳转传参

教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像的更多相关文章

  1. 用微信小程序开发的Canvas绘制可配置的转盘抽奖

    使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它 微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...

  2. 支付宝小程序serverless---获取用户信息(头像)并保存到云数据库

    支付宝小程序serverless---获取用户信息(头像)并保存到云数据库 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 我又 ...

  3. 微信小程序中使用canvas

    微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUr ...

  4. C# winform线程的使用 制作提醒休息小程序(长时间计算机工作者必备)

    最近发现日常的工作中,经常因为敲代码而忘记了休息,晚上眼睛特别的累. 并且经常长时间看着显示器,对眼睛一定是不好的,所以今天开发了一个小程序,用于提醒休息. 下面先看看运行效果: 1.程序启动后,后台 ...

  5. 评教数据整理专用VBA小程序

    这次评教的所有数据存放在两个数据库中,比如说给某教师评论的学生有100个,可是结果有40个的数据在数据库A中,另外60人的数据在数据库B中.那么,如何将两个库中的数据整合,最后得到教师的准确成绩成为了 ...

  6. 微信小程序——手把手教你写一个微信小程序

    前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 ...

  7. 手把手教你写一个RN小程序!

    时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...

  8. 教你如何实现微信小程序与.net core应用服务端的无状态身份验证

    随着.net core2的发布,越来越多人使用.net core2开发各种应用服务端,下面我就结合自己最近开发的一款小程序,给大家分享下,怎么使用小程序登录后,小程序与服务端交互的权限控制. .net ...

  9. 微信小程序官方指南手册,教你如何使用微信小程序!

    2017年1月9日,小程序如约而至.程序员们都讨论的热火朝天,但是真正使用过微信小程序的又有几个呢?下面今天我们给大家介绍下微信小程序到底应该如何使用? 首先,你的微信必须是最新版本的,微信官方是从要 ...

随机推荐

  1. ZOJ 3872 Beauty of Array 连续子序列求和

    Edward has an array A with N integers. He defines the beauty of an array as the summation of all dis ...

  2. adb 端口冲突

    第一种方法:可以设置另一个端口 第二种方法: http://blog.csdn.net/hwl1314/article/details/52538023 Android studio 5037端口被占 ...

  3. extends 关键字

    来源于百度: 在Java中,通过关键字extends继承一个已有的类,被继承的类称为父类(超类,基类),新的类称为子类(派生类).在Java中不允许多继承. 例子1:public class Clie ...

  4. Storm 系列(四)—— Storm 集群环境搭建

    一.集群规划 这里搭建一个 3 节点的 Storm 集群:三台主机上均部署 Supervisor 和 LogViewer 服务.同时为了保证高可用,除了在 hadoop001 上部署主 Nimbus ...

  5. 二进制协议gob及msgpack介绍

    本文主要介绍二进制协议gob及msgpack的基本使用. 最近在写一个gin框架的session服务时遇到了一个问题,Go语言中的json包在序列化空接口存放的数字类型(整型.浮点型等)都序列化成fl ...

  6. Python函数编程——闭包和装饰器

    Python函数编程--闭包和装饰器 一.闭包 关于闭包,即函数定义和函数表达式位于另一个函数的函数体内(嵌套函数).而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数.当其中一个 ...

  7. a149: 乘乘樂

    题目: 你拿到一个整数,却忍不住想把每个位数都乘在一起.例如看到356就会想要知道3 * 5 * 6的值为何.快写个程序帮帮为了乘数字而快发疯的自己吧! 思路:把这个数每一位%10,并且再将它每次/1 ...

  8. Java位运算实现加减乘除四则运算

    本文是继<一文了解有趣的位运算>的第二篇文章. 我们知道,计算机最基本的操作单元是字节(byte),一个字节由8个位(bit)组成,一个位只能存储一个0或1,其实也就是高低电平.无论多么复 ...

  9. 用101000张食物图片实现图像识别(数据的获取与处理)-python-tensorflow框架

    前段时间,日剧<轮到你了>大火,作为程序员的我,看到了另外一个程序员—二阶堂,他的生活作息,以及饮食规律,让我感同身受,最让我感触的是他做的AI聊天机器人,AI菜品分析机器人,AI罪犯分析 ...

  10. dart 大文件读取

    dart 中不可避免会出现文件读取的情况, 甚至是很大的文件, 比如 200M 的文件 如果一次性读入内存,虽然也行得通, 但是如果在 flutter 中开启个 200M 大小的字节数组, 一不小心可 ...