189 8069 5689
小编给大家分享一下微信小程序如何实现基于Taro的分享图片功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站技术团队十载来致力于为客户提供网站建设、成都网站制作、高端网站设计、成都营销网站建设、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了上千家网站，包括各类中小企业、企事单位、高校等机构单位。
Taro支持以React语言开发小程序，支持CSS预处理器，支持实时编译更新，支持NPM，等等等等，简直不要太爽！
微信小程序分享图片功能是经常在小程序业务中出现的，比如学习打卡分享，推广会员分享，推广商品分享等等。因为小程序是不支持直接分享图片到朋友圈的，一般操作为：
生成包含小程序码（当前也可以是其他特定的信息）的图片；
用户点击保存图片，下载到本地，再发布到朋友圈；
其他用户长按识别该小程序码，进入当前小程序。
今天胡哥给大家分享下，基于Taro框架实现微信小程序分享图片功能的实践。
一、搭建Taro项目框架，创建微信小程序
1. 安装taro脚手架工具
npm install -g @tarojs/cli
2. 初始化taro项目
taro init taro-img-share
3. 编译项目，开启Dev模式，生成小程序 -- dist目录
npm run dev:weapp
4. 微信开发者工具，创建小程序，选择项目根目录为taro-img-share下的dist目录
二、小程序分享图片功能实践 --- 打卡图片分享功能
先上图，再说话
效果图
点击保存到相册
这是重点：使用Canvas绘制图片并展示，保存图片到相册
drawImage()方法负责绘制展示，saveCard()方法负责下载图片到相册
src/pages/index/index.js
import Taro, { Component } from '@tarojs/taro'
// 引入对应的组件
import { View, Text, Button, Canvas } from '@tarojs/components'
import './index.scss'
export default class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
/**
* 初始化信息
*/
constructor () {
this.state = {
// 用户信息
userInfo: {},
// 是否展示canvas
isShowCanvas: false
}
}
/**
* getUserInfo() 获取用户信息
*/
getUserInfo (e) {
if (!e.detail.userInfo) {
Taro.showToast({
title: '获取用户信息失败，请授权',
icon: 'none'
})
return
}
this.setState({
isShowCanvas: true,
userInfo: e.detail.userInfo
}, () => {
// 调用绘制图片方法
this.drawImage()
})
}
/**
* drawImage() 定义绘制图片的方法
*/
async drawImage () {
// 创建canvas对象
let ctx = Taro.createCanvasContext('cardCanvas')
// 填充背景色
let grd = ctx.createLinearGradient(0, 0, 1, 500)
grd.addColorStop(0, '#1452d0')
grd.addColorStop(0.5, '#FFF')
ctx.setFillStyle(grd)
ctx.fillRect(0, 0, 400, 500)
// // 绘制圆形用户头像
let { userInfo } = this.state
let res = await Taro.downloadFile({
url: userInfo.avatarUrl
})
ctx.save()
ctx.beginPath()
// ctx.arc(160, 86, 66, 0, Math.PI * 2, false)
ctx.arc(160, 88, 66, 0, Math.PI * 2)
ctx.closePath()
ctx.clip()
ctx.stroke()
ctx.translate(160, 88)
ctx.drawImage(res.tempFilePath, -66, -66, 132, 132)
ctx.restore()
// 绘制文字
ctx.save()
ctx.setFontSize(20)
ctx.setFillStyle('#FFF')
ctx.fillText(userInfo.nickName, 100, 200)
ctx.setFontSize(16)
ctx.setFillStyle('black')
ctx.fillText('已在胡哥有话说公众号打卡20天', 50, 240)
ctx.restore()
// 绘制二维码
let qrcode = await Taro.downloadFile({
url: '/upload/otherpic51/3091895-f0b4b900390aec73.png%7CimageView2/2/w/258/format/webp.jpg'
})
ctx.drawImage(qrcode.tempFilePath, 70, 260, 180, 180)
// 将以上绘画操作进行渲染
ctx.draw()
}
/**
* saveCard() 保存图片到本地
*/
async saveCard () {
// 将Canvas图片内容导出指定大小的图片
let res = await Taro.canvasToTempFilePath({
x: 0,
y: 0,
width: 400,
height: 500,
destWidth: 360,
destHeight: 450,
canvasId: 'cardCanvas',
fileType: 'png'
})
let saveRes = await Taro.saveImageToPhotosAlbum({
filePath: res.tempFilePath
})
if (saveRes.errMsg === 'saveImageToPhotosAlbum:ok') {
Taro.showModal({
title: '图片保存成功',
content: '图片成功保存到相册了，快去发朋友圈吧~',
showCancel: false,
confirmText: '确认'
})
} else {
Taro.showModal({
title: '图片保存失败',
content: '请重新尝试!',
showCancel: false,
confirmText: '确认'
})
}
}
render () {
let { isShowCanvas } = this.state
return (
打卡
{/* 使用Canvas绘制分享图片 */}
{
isShowCanvas &&
保存到相册
}
)
}
} src/pages/index/index.sass
index.js组件中的css样式
.index {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.canvas-wrap {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.btn-save {
margin-top: 40rpx;
}
}注意事项
设置Taro支持ES6的async/await
1.下载@tarojs/async-await
npm install -D @tarojs/async-await
2.app.js中引入
import '@tarojs/async-await'
开发完毕，发布小程序
1.执行打包，生成最终的小程序源码
npm run build:weapp
2.发布小程序
点击微信开发者工具上传按钮，上传小程序，然后在微信小程序平台发布小程序即可。
小结
本文着重介绍了使用Taro实现小程序生成打卡图片，保存相册，分享图片功能的开发原理与实践步骤，各位童鞋可参考并结合自己的实际业务进行扩展开发。
本文并为深入的对不同手机进行图片适配，部分值也是设置的固定值（如填充文字的开始坐标与填充的文字长度、大小），并未做比例响应。需要进一步交流的小伙伴，可以关注胡哥有话说公众号，持续关注相关文章，也可直接在文章留言交流。
无论是使用何种框架如Taro、mpvue、wepy等开发小程序分享图片功能，原理都是一样的，只不过是在调用方法以及处理逻辑时需要进行响应的小调整
看完了这篇文章，相信你对“微信小程序如何实现基于Taro的分享图片功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！