首先看文档 了解知识点~~（https://developers.weixin.qq.com/miniprogram/dev/component/）
githup：https://github.com/ad-skylar/wxProjece_canvas
一.画布。
1.wxml 创建canvas
canvas-id canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性
<canvas style="width: 375px;height: 667px;position:fixed;" canvas-id="mycanvas"/>
2.js 调用wx.createCanvasContext
var context = wx.createCanvasContext('mycanvas');3.绘制一个矩形作为背景，填充白色
CanvasContext.fillRect(x, y, width,height)；
参数依次是 矩形x坐标、y坐标、图片宽、高
填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。
4.绘制图像到画布
CanvasContext.drawImage(src, x, y,width,height)
参数依次是图片地址、x坐标、y坐标、图片宽、高
5.绘制文字到画布
CanvasContext.fillText(text, x, y, maxWidth)
参数依次是文本内容、x坐标、y坐标、需要绘制的最大宽度，可选
6.设置字体颜色，大小，位置等等看看文档就ok了
二、保存图片到系统相册。调用前需要 用户授权 scope.writePhotosAlbum。
wx.saveImageToPhotosAlbum({
success(res) { }
})
代码：share.wxml
<!--pages/share/share.wxml-->
<view>
<image src="{{img}}" mode="widthFix" class='bgImg'></image>
<view class="shareText">
<text class='text'>从前从前有个人爱你很久，但偏偏风渐渐把距离吹的好远。</text>
<text class='text text2'> ———— 周杰伦《晴天》</text>
</view>
<view class='imgBox'>
<button open-type="share" class='zfbtn'>
<image src="{{wechat}}" class='img'></image>
<text class='btntxt'>分享给朋友</text>
</button>
<button class='zfbtn m_l' bindtap='formSubmit'>
<image src="{{xiazai}}" class='img'></image>
<text class='btntxt'>生成海报</text>
</button>
</view>
<!--生成海报 -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<image src="{{imagePath}}" class='shengcheng'></image>
<button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view>
<view class="canvas-box">
<canvas style="width: 375px;height: 667px;position:fixed;" canvas-id="mycanvas"/>
</view>
</view>share.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
img: "../../images/me.jpg",
wechat: "../../images/wechat.png",
xiazai: "../../images/xiazai.png",
share:"../../images/share.png",
maskHidden: false,
name: "",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
createNewImg: function () {
var that = this;
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle("#fff")
context.fillRect(0, 0, 375, 667)
var path = "/images/me.jpg";
context.drawImage(path, 56, 56, 262, 349);
var path5 = "/images/code.jpg";
var path2 = "/images/text.png";
var name = that.data.name;
context.drawImage(path2, 56, 400, 263, 121);
//绘制左下角文字
context.setFontSize(14);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("长按识别小程序", 70, 560);
context.stroke();
context.setFontSize(14);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("跟我一起来学习吧~~", 70, 580);
context.stroke();
//绘制右下角小程序二维码
context.drawImage(path5, 230, 530,80,80);
context.draw();
//将生成好的图片保存到本地
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
//点击保存到相册
baocun: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
wx.showModal({
content: '海报已保存到相册',
showCancel: false,
confirmText: '确定',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
}, fail: function (res) {
console.log(11111)
}
})
}
})
},
//点击生成
formSubmit: function (e) {
var that = this;
this.setData({
maskHidden: false
});
wx.showToast({
title: '海报生成中...',
icon: 'loading',
duration: 1000
});
setTimeout(function () {
wx.hideToast()
that.createNewImg();
that.setData({
maskHidden: true
});
}, 1000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
wx.getUserInfo({
success: res => {
console.log(res.userInfo, "huoqudao le ")
this.setData({
name: res.userInfo.nickName,
})
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
return {
title: "一起来学习小程序吧~",
success: function (res) {
console.log(res, "转发成功")
},
fail: function (res) {
console.log(res, "转发失败")
}
}
}
})
share.wxss
/* pages/share/share.wxss */
.bgImg{
display: block;
width: 70%;
height: 366rpx;
margin: 5% 15%;
}
.shareText{
color: #333;
font-size: 28rpx;
margin-top: 50rpx;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
.shareText .text{
line-height: 60rpx;
width: 100%;
padding: 0 15%;
box-sizing: border-box;
display: block;
color: #333;
}
.shareText .text2{
text-align: right;
}
.btntxt{
color: #333;
font-size: 26rpx;
}
.imgBox{
text-align: center;
width: 100%;
margin-top:60rpx;
padding-bottom: 120rpx;
display: flex;
}
.img{
display: inline-block;
width: 100%;
height: 100%;
}
.m_l{
margin-left: 180rpx;
}
.zfbtn{
display:flex;
flex-direction: column;
font-size: 28rpx;
align-items: center;
justify-content: center;
background: #fff;
}
.zfbtn image{
width: 70rpx;
height: 70rpx;
}
button[class="zfbtn"]::after {
border: 0;
}
button[class="zfbtn m_l"]::after {
border: 0;
}
.imagePathBox{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.shengcheng{
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.baocun{
display: block;
width: 80%;
height: 70rpx;
padding: 0;
line-height: 70rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
color: #fff;
font-size: 32rpx;
border-radius: 24rpx;
background: #fdd668;
}
button[class="baocun"]::after{
border: 0;
}iconfont下载的
歌词是我自己分享页写好的直接截图了。canvas我排版有点难看哦，直接把图片画上去了。大家自己写哦，不要学我懒省事。照片是我自己随便找的，4:3的，一般手机拍的大多都是这个比例~~
总结下 自己留存 -.-
来源：oschina
链接：https://my.oschina.net/u/4401279/blog/3302221