微信小程式(四)canvas繪圖並儲存到手機相簿並分享到朋友圈和fileText繪製文字進行自動換行
阿新 • • 發佈:2019-02-06
思路
首先準備好一張圖片,本地圖片和網路圖片均可作為你的背景圖小程式目前不支援截圖,這裡講解本地圖片。
會用到 wx.createCanvasContext(#獲取畫布的id)、
drawImage(#將圖片畫到背景圖上)、
setFillStyle(#設定字型的顏色)、
setFontSize(#字型大小)、
fillText(#設定你所需的文字)、
draw(#儲存畫好的圖片)、
wx.canvasToTempFilePath(#儲存圖片路徑)、
wx.saveImageToPhotosAlbum(#儲存圖片到手機相簿)
詳細的請移步微信小程式官方文件
第一步
wxml 準備畫布
<canvas class='ce' canvas-id="myCanvas" >先設定畫布樣式展示出來</canvas>
<button bindtap="conceals">分享圖</button>
第二步
js 進行點選觸發
解釋:this.data.qr 是data{}裡面的資料
conceals: function () {
//獲取畫布
const cts = wx.createCanvasContext('myCanvas')
cts.drawImage(this.data.back, 5 , 5, 600, 450)
cts.setFontSize(14)
cts.setFillStyle("#606D80")
cts.fillText('周圍物體'+':'+this.data.datas[0].tag_name,50,300)
cts.drawImage(this.data.qr, 200, 400, 50, 50);
cts.drawImage(this.data.src, 50, 50, 170, 200);
// 畫圖完成進行儲存圖片路徑
var that = this
cts.draw(false,function(){
wx.canvasToTempFilePath({
canvasId: 'myCanvas' ,
success: function (res) {
console.log(res.tempFilePath)
if (!res.tempFilePath){
wx.showModal({
title: '提示',
content: '圖片繪製中,請稍後重試',
showCancel: false
})
}
//圖片路徑儲存後在下載到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success:function(res){
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
setTimeout(function () {
console.log(res)
wx.hideLoading()
}, 3000)
},
fail:function(err){
console.log(err)
wx.hideLoading()
}
})
}
}, this)
})
},
fileText繪製文字自動換行
即粘即用
var text = "這是要繪製的文字"//這是要繪製的文字
var chr = text.split("")
console.log(chr)
var temp = ""
var row = []
for (var a = 0; a < chr.length; a++) {
if (cts.measureText(temp).width < 250) {
temp += chr[a];
}
else {
a--; //這裡添加了a-- 是為了防止字元丟失,
row.push(temp);
temp = "";
}
}
row.push(temp);
//如果陣列長度大於2 則擷取前兩個
//2取前兩行3取前三行
if (row.length > 2) {
var rowCut = row.slice(0, 3);
var rowPart = rowCut[1];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (cts.measureText(test).width < 220) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[0] + "..."//這裡只顯示兩行,超出的用...表示
rowCut.splice(2, 2, group);//1,1在第二行開始有省略號。2,2在第三行有省略號
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
cts.fillText(row[b], 5, 330 + b * 30);
}