微信小程式自定義二維碼分享圖--Canvas畫圖及注意事項
阿新 • • 發佈：2019-02-11
在一二月份做專案的時候，需要做一個微信小程式的自定義的二維碼，在此記錄與分享如何用Canvas畫圖怎麼自定義一個美觀的二維碼分享圖。
先展示下效果：
展示的是一個個人中心的小demo，下文會把這個demo的地址分享，匯入專案後，點選分享推薦就可得到該效果。
頁面
//PersonalPage.wxml
<view class='user'>
<view class='firstlayout'>
<image src="{{img}}" class='firstimagestyle'></image>
< 佈局
//PersonalPage.wxss
page{
width:100%;
height: 100%;
}
.user{
background: rgb(245, 245, 245);
width:100%;
height: 100%;
}
.user-item{
margin-top: 30rpx;
width:100%;
display: flex;
flex-direction: column;
}
.item{
background: #fff;
height:100rpx;
margin-top:20rpx;
line-height: 100rpx;
display: flex;
justify-content: space-between;
}
.item-title{
flex-grow: 4;
margin-left: 20rpx;
}
.container{
/*彈性模型*/
display:flex;
/*垂直方向 列方向 排布*/
flex-direction:column;
/*居中*/
/*align-items:center;*/
/*要從整體解決排布的問題是最好的方案*/
background: rgb(245, 245, 245);
}
.containe1{
margin-top: 50rpx;
width: 100%;
display: flex;
flex-direction:column;
}
.firstlayout{
/*彈性模型*/
display:flex;
/*垂直方向 列方向 排布*/
flex-direction:column;
/*居中*/
align-items:center;
/*要從整體解決排布的問題是最好的方案*/
width: 100%;
height: 400rpx;
background: #21bba6;
}
.firstimagestyle{
width: 180rpx;
height: 180rpx;
margin: 20rpx;
border-radius: 50%;
border:3px solid #FFFFFF;
}
.firstfontstyle{
font-size:34rpx;
color: #FFFFFF;
}
.secondlayout{
width: 550rpx;
height: 50rpx;
/*彈性模型*/
display:flex;
flex-direction: row;
/*居中*/
/*align-items:center;*/
justify-content:center;
margin-top: 25rpx;
}
.secondlayoutitem{
width: 50%;
display:flex;
flex-direction: row;
justify-content:center;
}
.lineview{
width: 2rpx;
height: 40rpx;
background: #FFFFFF;
margin-top: 6rpx;
}
.secondimagestyle{
width: 40rpx;
height: 40rpx;
margin: 30rpx;
}
.fourthlayout{
width:50%;
height: 100%;
text-align:right;
}
.thirdimagestyle{
width: 60rpx;
height: 60rpx;
margin: 20rpx;
}
.secondfontstyle{
flex-grow: 4;
margin-left: 40rpx;
}
.lineviewtwo{
width: 100%rpx;
height: 1px;
background: #708090;
}
.bg {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}
.show {
text-align: center;
position: absolute;
top: 5%;
left: 10%;
width: 80%;
height: 90%;
z-index: 1002;
}
.canvas-box {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 999999rpx;
}
.containera {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
}
image {
width: 100%;
height: 75%;
}
.fourlayoutstylea {
width: 50%;
height: 200rpx;
align-items: center;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25%;
}
Canvas畫圖
//點選事件
onShareTap: function (event) {
wx.showLoading({
title: '生成中',
})
this.setData({
display: "block",
})
var that = this;
that.onshow("溯夜", "../../images/personCenter/1.jpg");
// wx.getImageInfo({
// src: app.globalData.img,
// success: function (sres) {
// that.onshow(app.globalData.name, sres.path);
// }
// })
},
在這裡注意的是，微信小程式不能直接獲取網路上的圖片資源，如果想要引用網路上的圖片資源，需要快取，可以呼叫 wx.getImageInfo方法快取，快取成功該方法會返回圖片的地址，這個地址微信小程式可以直接引用。
onshow: function (name, img) {
var that = this;
// canvas繪製文字和圖片，建立畫圖
const ctx = wx.createCanvasContext('myCanvas');
//繪製背景圖
var bgImgPath = '../../images/personCenter/17.jpg'
var imgPath = '../../images/personCenter/ma.jpg';//二維碼
ctx.drawImage(bgImgPath, 0, 0, this.data.windowWidth, 280);
ctx.setFillStyle('white')
ctx.fillRect(0, 280, 300, 120);
ctx.drawImage(imgPath, 190, 290, 100, 100);
ctx.drawImage(img, 10, 290, 40, 40)
//繪製字型，顏色，與位置
ctx.setFontSize(14)
ctx.setFillStyle('#6F6F6F')
ctx.fillText(name, 63, 314)
ctx.setFontSize(15)
ctx.setFillStyle('#111111')
ctx.fillText('親們快來使用回收利器', 10, 350)
ctx.fillText(name + '在築夢迴收', 10, 370)
ctx.setFontSize(10)
ctx.fillText('長按掃碼檢視詳情', 10, 390)
//canvasToTempFilePath必須要在draw的回撥中執行，否則會生成失敗，官方文件有說明
ctx.draw(false, setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.windowWidth,
height: that.data.windowHeight,
destWidth: that.data.windowWidth * 2,
destHeight: that.data.windowHeight * 2,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath);
wx.hideLoading();
that.setData({
shareImgSrc: res.tempFilePath
})
},
fail: function (res) {
wx.hideLoading();
wx.showToast({
title: '生成失敗',
icon: "none"
})
}
})
}, 200));
},
這裡一定小心注意的是，canvasToTempFilePath必須要在draw的回撥中執行，否則會生成失敗，官方文件有說明。 而且，為保證圖片生成的清晰度，destWidth與destHeight需設定成你原來期待高度與寬度的n倍，一般兩到三倍就行了，否則圖片很大，生成較慢。
儲存在本地
//儲存在本地
showLocal: function () {
var that = this;
console.log(that.data.shareImgSrc);
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImgSrc,
success(res) {
wx.showModal({
title: '存圖成功',
content: '圖片成功儲存到相簿了，去髮圈噻~',
showCancel: false,
confirmText: '好噠',
confirmColor: '#21bba6',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定');
}
}
})
}, fail: function () {
wx.showToast({
title: '儲存失敗',
icon: "none"
})
}
})
}
})
