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

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. hdu 1028 Ignatius and the Princess III 母函数

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  2. "ANDROID" 支持的KEYCODE

      例子: adb shell input text keyevent 4 0 -->  "KEYCODE_UNKNOWN" 1 -->  "KEYCODE_ ...

  3. framework7 picker 具体使用

    官网地址:https://framework7.io/docs/picker.html#dom-events <meta charset="UTF-8"> <me ...

  4. requests + BeautifulSoup + json

    requests: response.text      以 unicode 格式显示响应的文本 response.content    以 二进制 格式显示响应的文本 BeautiSoup: sou ...

  5. 使用Nginx实现负载均衡(tomcat集群之后实现交叉访问)

    tomcat集群(多一台服务器),使用nginx实现负载均衡(upstream sina中配置即可):使用上次博客中的sina案例 1.首先再加一个tomcat服务: 2.修改server.xml配置 ...

  6. Runtime.getRuntime().exec()实现Java调用python程序

    使用Runtime.getRuntime().exec()来实现Java调用python,调用代码如下所示: import java.io.BufferedReader; import java.io ...

  7. MyBatis基础之几道常见面试题详解

    (原文链接:http://www.studyshare.cn/blog/details/1178/1 一.开发中到底应该使用resultType还是resultMap? 强制使用resultMap,不 ...

  8. Python集训营45天—Day02

    目录 变量和运算符 1.1 初步介绍 1.2 使用案例 1.3 知识点梳理 1.4 练习 序言:这一章我们将学习变量以及常见的类型,我们将以案例和代码相结合的方式进行梳理,但是其中所有的案例和知识点 ...

  9. mybatis动态拼接条件的技巧 where 1=1 或者where标签

    /**     * 根据输入的学生信息进行条件检索     * 1. 当只输入用户名时, 使用用户名进行模糊检索:     * 2. 当只输入邮箱时, 使用性别进行完全匹配     * 3. 当用户名 ...

  10. PLC与上位机的socket通讯——上位机C#程序(二)

    C#的网口通信 一.命令行 客户端程序:using System;using System.Collections.Generic;using System.Linq;using System.Tex ...