微信小程序之生成图片分享 二维码分享 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. 利益相关者 利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...
随机推荐
- docker中mysql pxc集群
PXC集群 https://hub.docker.com/r/percona/percona-xtradb-cluster 安装PXC镜像 下载镜像或者导入本地镜像 docker pull perco ...
- Mysql 插入自增的最大版本号
有一个需求,在历史表中,一条数据,在最大版本号上进行自增 INSERT Biz_CourseStudyHistory ( contentStudyID, courseWareID, versionNO ...
- forever at your feet
A locket on a chainA bow that's made from rainA briar grows entwined with roseI've come to be foreve ...
- 上传base64图片并压缩
elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...
- matlab学习笔记8 基本绘图命令-LineSpec线条设定
一起来学matlab-matlab学习笔记8 基本绘图命令_4 LineSpec线条设定 觉得有用的话,欢迎一起讨论相互学习~Follow Me 绘图函数接受线条设定作为参数并相应地修改生成的图形.您 ...
- 使用EF 4.1的DbContext的方法大全
简述:EF4.1包括Code First和DbContext API.DbContext API为EF提供更多的工作方式:Code First,Database First和Model First. ...
- zabbix解决中文乱码
解决中文乱码 yum install -y wqy-microhei-fonts #解决方法 中文乱码 \cp /usr/share/fonts/wqy-microhei/wqy-microhei.t ...
- spring boot @RequestBody数据传递及解析
@RequestBody需要接的参数是一个string化的json @RequestBody,要读取的数据在请求体里,所以要发post请求,还要将Content-Type设置为application/ ...
- H2数据库介绍
H2数据库是一个开源的关系型数据库. H2是一个采用java语言编写的嵌入式数据库引擎,只是一个类库(即只有一个 jar 文件),可以直接嵌入到应用项目中,不受平台的限制 应用场景: 可以同应用程序打 ...
- odoo 流水码 编码规则
<?xml version="1.0" encoding="utf-8"?> <odoo> <data noupdate=&quo ...