在做微信小程序的時(shí)候,很多都會(huì)用到生成海報(bào)分享功能,剛好最近項(xiàng)目有這個(gè)需求,今天就發(fā)出來(lái)記錄下
首先是使用canvas繪制一張海報(bào),微信小程序的canvas有老版本和新版本我是用的是新版本
代碼如下
<canvas class="canvas" type="2d" id="myCanvas"></canvas>js部分
我的做法是給canvas隱藏了不看到 ,等canvas繪制完畢后導(dǎo)出的url直接賦給image的url,然后彈出層展示,只展示生成的海報(bào)和保存圖片按鈕
qrcode(e) {
let _this = this
let type = e.currentTarget.dataset.type
if (_this.data.canvasurl !== '' && type === 'open') {
_this.setData({
show: true
})
return
}
if (type === 'open') {
wx.showLoading({
title: '分享海報(bào)生成中',
})
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
// 獲取設(shè)備像素比
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
// 商品圖片
const bg = canvas.createImage();
bg.src = _this.data.goodList.imgurl
bg.onload = () => {
ctx.drawImage(bg, 0, 0, 251, 225)
}
// 分割線
ctx.strokeStyle = 'rgba(255,255,255,0.1)';
ctx.beginPath();
ctx.moveTo(0, 225);
ctx.lineTo(251, 225);
ctx.stroke();
// 下半部分矩形
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 251, 406);
ctx.fill()
// 商品名稱(chēng)
ctx.fillStyle = '#000';
ctx.font = "16px Arial";
ctx.fillText(_this.data.goodList.goods_name, 12.5, 250);
ctx.fill()
// 商品規(guī)格
let width = _this.data.goodList.goods_attr.length * 10
_this.strokeRoundRect(ctx, 12.5, 260, width, 20, 10, 'rgba(255, 111, 96,0.2)')
ctx.font = "12px Arial";
ctx.fillStyle = "#FF6F60";
ctx.fillText(_this.data.goodList.goods_attr, 20, 274);
// 商品價(jià)格
ctx.font = "20px Arial";
ctx.fillText('￥' + _this.data.goodList.goods_price, 150, 280);
// 最下方文字
ctx.font = "12px Arial";
ctx.fillStyle = "#949494";
ctx.fillText('長(zhǎng)按識(shí)別·去看看', 77, 380);
// 繪制二維碼
App._post_form('qr', {
id: _this.data.goodList.goods_id
}, result => {
const code = canvas.createImage();
code.src = result.data
code.onload = () => {
ctx.drawImage(code, 80, 285, 80, 80)
}
setTimeout(() => {
_this.setData({
// 導(dǎo)出canvas的url(base64格式)
canvasurl: canvas.toDataURL('image/png'),
show: true
})
wx.hideLoading()
}, 1000)
})
})
} else {
_this.setData({
show: false
})
}
},canvas繪制完畢,導(dǎo)出url后開(kāi)始實(shí)現(xiàn)保存本地功能
如果是后端返的海報(bào)圖片的話直接使用wx.downloadFile方法先下載到本地然后使用
wx.saveImageToPhotosAlbum再保存到相冊(cè)
?我是用的是canvas繪制后生成的base64所以先將base64轉(zhuǎn)成圖片保存在本地再使用wx.saveImageToPhotosAlbum保存到相冊(cè)
// 保存圖片到本地
download() {
const _this = this;
// 生成臨時(shí)路徑
var filepath = wx.env.USER_DATA_PATH + '/test.png';
//獲取文件管理器對(duì)象
var aa = wx.getFileSystemManager();
aa.writeFile({
filePath: filepath,
//只保留base64編碼 截掉data:image/png;base64,
data: _this.data.canvasurl.slice(22),
encoding: 'base64',
success: function (res) {
wx.showLoading({
title: '保存中...'
})
wx.saveImageToPhotosAlbum({
filePath: filepath,
success: function (data) {
console.log('保存成功', data)
wx.hideLoading()
_this.setData({
show: false
})
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
// 刪除下載暫存在本地的圖片
let fileMgr = wx.getFileSystemManager()
fileMgr.unlink({
filePath: res.filePath,
success: () => {
console.log('刪除緩存成功!')
}
})
},
fail: function (err) {
// 判斷用戶是否授權(quán)相冊(cè)寫(xiě)入權(quán)限
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
//當(dāng)初用戶拒絕，再次發(fā)起授權(quán)
wx.showModal({
title: '提示',
content: '需要您授權(quán)保存相冊(cè)',
showCancel: false,
success: () => {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '獲取權(quán)限成功,再次點(diǎn)擊按鈕即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '獲取權(quán)限失敗，將無(wú)法保存到相冊(cè)',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
},
complete(result) {
//console.log(result);
//wx.hideLoading()
}
})
}
})
},所有代碼對(duì)應(yīng)的注釋都在里面,所有的API官方文檔都有,只是做的時(shí)候需要一個(gè)一個(gè)查
附上效果圖
?
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-404696.html
發(fā)帖只是記錄,謝謝觀看文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-404696.html
?
到了這里，關(guān)于微信小程序使用canvas繪制海報(bào)并保存本地相冊(cè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
