如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤

如果解决不了,可以在文末进群交流。

添加画布

首先,在小程序里进行绘图操作需要用到<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.canvasToTempFilePathwx.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绘制的更多相关文章

  1. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  2. 重磅消息:微信小程序支持长按二维码进入

    之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...

  3. 微信小程序(4)--二维码窗口

    微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open&quo ...

  4. 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数,跳转问题

    在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...

  5. 微信小程序-携带参数的二维码条形码生成

    demo文件目录 index.js文件 //index.js var wxbarcode = require('../../utils/index.js'); Page({ data: { code: ...

  6. 小程序入口构造工具&二维码测试工具

    小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&a ...

  7. 微信小程序生成带参数的二维码 小程序二维码

    我是用php写的 先按照要求生成accesstoken $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=clien ...

  8. 微信小程序生成带参数的二维码(小程序码)独家asp.net的服务端c#完整代码

    一)我先用的小程序端的wx.request去调用API,发现竟然是一个坑! wx.request({ url: 'https://api.weixin.qq.com/wxa/getwxacodeunl ...

  9. 微信小程序《沈航二手书》

    微信小程序<沈航二手书> 0x01. 利益相关者  利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...

随机推荐

  1. docker中mysql pxc集群

    PXC集群 https://hub.docker.com/r/percona/percona-xtradb-cluster 安装PXC镜像 下载镜像或者导入本地镜像 docker pull perco ...

  2. Mysql 插入自增的最大版本号

    有一个需求,在历史表中,一条数据,在最大版本号上进行自增 INSERT Biz_CourseStudyHistory ( contentStudyID, courseWareID, versionNO ...

  3. 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 ...

  4. 上传base64图片并压缩

    elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...

  5. matlab学习笔记8 基本绘图命令-LineSpec线条设定

    一起来学matlab-matlab学习笔记8 基本绘图命令_4 LineSpec线条设定 觉得有用的话,欢迎一起讨论相互学习~Follow Me 绘图函数接受线条设定作为参数并相应地修改生成的图形.您 ...

  6. 使用EF 4.1的DbContext的方法大全

    简述:EF4.1包括Code First和DbContext API.DbContext API为EF提供更多的工作方式:Code First,Database First和Model First. ...

  7. zabbix解决中文乱码

    解决中文乱码 yum install -y wqy-microhei-fonts #解决方法 中文乱码 \cp /usr/share/fonts/wqy-microhei/wqy-microhei.t ...

  8. spring boot @RequestBody数据传递及解析

    @RequestBody需要接的参数是一个string化的json @RequestBody,要读取的数据在请求体里,所以要发post请求,还要将Content-Type设置为application/ ...

  9. H2数据库介绍

    H2数据库是一个开源的关系型数据库. H2是一个采用java语言编写的嵌入式数据库引擎,只是一个类库(即只有一个 jar 文件),可以直接嵌入到应用项目中,不受平台的限制 应用场景: 可以同应用程序打 ...

  10. odoo 流水码 编码规则

    <?xml version="1.0" encoding="utf-8"?> <odoo> <data noupdate=&quo ...