微信小程序之生成图片分享 二维码分享 canvas绘制
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤
如果解决不了,可以在文末进群交流。
添加画布
首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以下3个部分:一张大的背景图,一段动态的文字(‘标题 用户名 及其他信息’),以及一个小程序码图片。那我们就先在我们的wxml代码中放入如下的<canvas>:
<!--wxml代码-->
<view style='width:100%;height:100%;' bindlongpress='saveInviteCard'>
<canvas canvas-id="shareCanvas" style="width:{{windowWidth}}px;height:{{windowHeight}}px" ></canvas>
</view>
第三方函数引入
const util = require('../../utils/util.js')
//util.js
var Promise = require('../components/bluebird.min.js') module.exports = {
promisify: api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options, ...extras }, ...params)
})
}
}
}bluebird.min.js大家可自己百度下载,源文件代码太长,我这里就不复制粘贴了。
//获取手机宽高
wx.getSystemInfo({
success: function (res) {
wc.put('phoneInfo', res)
}
});
var windowHeight = phoneInfo.windowHeight, windowWidth = phoneInfo.windowWidth
self.setData({
windowHeight: windowHeight,
windowWidth: windowWidth
})
//在这段代码中,我们通过使用wx.getImageInfo这个API来下载一个网络图片到本地(并可获取该图片的尺寸等其他信息),然后调用ctx.drawImage方法将图片绘制到画布上,填满画布。
//图片的src地址,请使用小程序内合法域名生成的图片地址。
const wxGetImageInfo = util.promisify(wx.getImageInfo)
//绘制二维码
Promise.all([
//背景图
wxGetImageInfo({
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536213812443&di=753a0a49acfd390fba9fd7884daafa5c&imgtype=0&src=http%3A%2F%2Fi5.hexunimg.cn%2F2016-08-10%2F185422031.jpg'
}),
//二维码
wxGetImageInfo({
src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1898297765,3486952215&fm=26&gp=0.jpg'
})
]).then(res => {
console.log(res)
if (res[0].errMsg == "getImageInfo:ok" && res[1].errMsg == "getImageInfo:ok"){
const ctx = wx.createCanvasContext('shareCanvas')
// 底图
ctx.drawImage(res[0].path, 0, 0, windowWidth, windowHeight)
//写入文字
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#f3a721') // 文字颜色:黑色
ctx.setFontSize(22) // 文字字号:22px
ctx.fillText("作者:墜夢—Eric", windowWidth / 2, windowHeight / 2)
// 小程序码
const qrImgSize = 150
ctx.drawImage(res[1].path, (windowWidth - qrImgSize) / 2, windowHeight / 1.8, qrImgSize, qrImgSize)
ctx.stroke()
ctx.draw()
}else{
wx.showToast({
title: '邀请卡绘制失败!',
image:'../../asset/images/warning.png'
})
}
})
背景图和二维码的图片地址,请使用小程序合法域名内的src地址。
这样,差不多我们的分享图就生成好了。
长按图片保存到系统相册
要把它保存进用户的系统相册中去,实现这个功能,我们主要靠
wx.canvasToTempFilePath
和wx.saveImageToPhotosAlbum
这两个API。主要的流程就是先通过
wx.canvasToTempFilePath
将<canvas>
上绘制的图像生成临时文件的形式,然后再通过wx.saveImageToPhotosAlbum
进行保存到系统相册的操作。
//保存邀请卡
saveInviteCard:function(){
console.log('保存图片')
const wxCanvasToTempFilePath = util.promisify(wx.canvasToTempFilePath)
const wxSaveImageToPhotosAlbum = util.promisify(wx.saveImageToPhotosAlbum)
wxCanvasToTempFilePath({
canvasId: 'shareCanvas'
}, this).then(res => {
return wxSaveImageToPhotosAlbum({
filePath: res.tempFilePath
})
}).then(res => {
wx.showToast({
title: '已保存到相册'
})
})
}
有其他问题,请大家进入微信群
,二维码如果过期,大家可以加我微信:mengyilingjian,一起交流。
微信小程序之生成图片分享 二维码分享 canvas绘制的更多相关文章
- 微信小程序动态生成保存二维码
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...
- 重磅消息:微信小程序支持长按二维码进入
之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...
- 微信小程序(4)--二维码窗口
微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open&quo ...
- 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数,跳转问题
在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...
- 微信小程序-携带参数的二维码条形码生成
demo文件目录 index.js文件 //index.js var wxbarcode = require('../../utils/index.js'); Page({ data: { code: ...
- 小程序入口构造工具&二维码测试工具
小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&a ...
- 微信小程序生成带参数的二维码 小程序二维码
我是用php写的 先按照要求生成accesstoken $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=clien ...
- 微信小程序生成带参数的二维码(小程序码)独家asp.net的服务端c#完整代码
一)我先用的小程序端的wx.request去调用API,发现竟然是一个坑! wx.request({ url: 'https://api.weixin.qq.com/wxa/getwxacodeunl ...
- 微信小程序《沈航二手书》
微信小程序<沈航二手书> 0x01. 利益相关者 利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...
随机推荐
- 003 Vue动画
一: 0.说明 在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义 ...
- 制作Visual Studio 2017 (VS 2017) 离线安装包 (转)
史上功能最强大的Visual Studio 2017版本发布,但是由于版本更新速度加快和与第三方工具包集成的原因,微软研发团队没有为这个版本提供离线下载的安装文件.如果用户处在一个与外网隔离的网络环境 ...
- oracle 常用命令【创建表空间用户及删除】
/*第1步:创建临时表空间 */ create temporary tablespace ZJY_TEMP tempfile '/usr/u01/app/oradata/orcl/ZJY_TEMP.d ...
- 13 JSP、MVC开发模式、EL表达式和JSPL标签+软件设计架构---学习笔记
1.JSP (1)JSP概念:Java Server Pages 即java服务器端页面可以理解为:一个特殊的页面,其中既可以指定定义html标签,又可以定义java代码用于简化书写!!! (2)原理 ...
- [转帖]B树索引和位图索引的结构介绍
B树索引和位图索引的结构介绍 http://blog.itpub.net/12679300/viewspace-1174236/ 一 前言:? ROWID:包含键值的行的行ID,(查找块的最快方法, ...
- JVM——java内存模型和线程
概述 计算机的运算速度与它的存储和通信子系统速度的差距太大,大量的时间都花费在磁盘I/O.网络通信或者数据库访问上.我们当然不希望处理器大部分时间都处于等待其他资源的状态,要通过一些“手段”去把处理器 ...
- flask 表单填充数据报错!AttributeError: 'dict' object has no attribute 'getlist'
报错信息: AttributeError: 'dict' object has no attribute 'getlist' 解决: 虽然是小毛病,不得不说还是自己太粗心大意了.
- Python操作MongoDB查询时处理ObjectId
从bson中导入ObjectId对象,将字符串转换成id对象查询使用: from bson import ObjectId import pymongo conn = pymongo.MongoCli ...
- Linux iptables常用防火墙规则
iptables -A INPUT -s 127.0.0.1 -d 127.0.0.1 -j ACCEPT #允许本地回环接口(即运行本机访问本机) iptables -A INPUT -m stat ...
- mysql 生成指定范围随机数
生成随机数 生成0-3的随机数 SELECT RAND() * 3 最大不会超过3, SELECT FLOOR(RAND() * 3) 上面生成整数的值是0,1,2,3生成的随机整数是1,2,3的话, ...