微信小程序分享之生成海报--canvas
首先看文档 了解知识点~~（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的，一般手机拍的大多都是这个比例~~
总结下 自己留存 -.-
