由于小程序的分享只能分享給好友塞关，不能通過其他的渠道去分享，所以就有了海報(bào)的這種需求
思路
- 利用 canvas 將海報(bào)畫出來
- 將畫出來的海報(bào)轉(zhuǎn)換成圖片
- 將圖片保存至本地相冊(cè)
引入 Canvas
指定 type='2d' 來提升性能
import { Canvas } from '@tarojs/components'
<Canvas id='canvas' className='canvas' type='2d' />
獲取 Canvas 節(jié)點(diǎn)
// 創(chuàng)建一個(gè)選擇器對(duì)象
const query = Taro.createSelectorQuery()
// 選擇當(dāng)前頁面下第一個(gè) #canvas
// 返回 NodesRef 用于獲取 WXML 節(jié)點(diǎn)信息的對(duì)象
query.select('#canvas')
// 獲取節(jié)點(diǎn)的相關(guān)信息。需要獲取的字段在fields中指定标捺。返回值是 nodesRef 對(duì)應(yīng)的 selectorQuery
.fields({ node: true, size: true })
// 執(zhí)行所有的請(qǐng)求。請(qǐng)求結(jié)果按請(qǐng)求次序構(gòu)成數(shù)組，在callback的第一個(gè)參數(shù)中返回
.exec(this.draw.bind(this))
創(chuàng)建 Canvas 實(shí)例
draw(res: NodesRef) {
// Canvas 實(shí)例
const canvas = res[0].node
this.canvas = canvas
// Canvas 的繪圖上下文
const ctx = canvas.getContext('2d')
...
}
開始繪制
draw(res: NodesRef) {
// Canvas 實(shí)例
const canvas = res[0].node
this.canvas = canvas
// Canvas 的繪圖上下文
const ctx = canvas.getContext('2d')
// 設(shè)備像素比
// 這里根據(jù)像素比來設(shè)置 canvas 大小
const dpr = Taro.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
// 解決下載來的圖片是黑色背景的問題
ctx.fillStyle = '#ffffff'
ctx.fillRect(0, 0, res[0].width, res[0].height)
// 獲取圖片信息
Taro.getImageInfo({
src: '../../images/banner_01.png',
success: resImg => {
// 創(chuàng)建一個(gè)圖片對(duì)象
const img = canvas.createImage();
img.src = '../../' + resImg.path
img.onload = () => {
// 繪制圖像到畫布
ctx.drawImage(img, 0, 0, 300, 150)
}
},
fail(fail) {
console.log(fail)
}
})
// 繪制文本
ctx.font = '18px Microsoft YaiHei'
ctx.fillStyle = 'black'
ctx.fillText('英語直播', 20, 180)
// 同上面的功能
const img = canvas.createImage();
img.src = '../../images/shera.png'
img.onload = () => {
ctx.drawImage(img, 20, 200, 70, 70)
}
// 繪制文本
ctx.font = '14px Microsoft YaiHei'
ctx.fillStyle = 'blue'
ctx.fillText('@Owen', 120, 200)
// 繪制文本
ctx.font = '12px sans-serif'
ctx.fillStyle = 'black'
ctx.fillText('給你推薦一堂好課', 120, 220)
// 繪制文本
ctx.font = '12px sans-serif'
ctx.fillStyle = 'black'
ctx.fillText('長(zhǎng)按識(shí)別小程序查看課程', 120, 240)
// 繪制文本
ctx.font = '10px sans-serif'
ctx.fillStyle = 'gary'
ctx.fillText('來自：奮翔升學(xué)服務(wù)中心', 120, 260)
}
注意點(diǎn)：
ctx.setFillStyle 需要用 ctx.fillStyle 代替
ctx.setFontSize 需要用 ctx.font 代替
在繪制網(wǎng)絡(luò)圖片的時(shí)候需要先調(diào)用 Taro.getImageInfo 獲得圖片信息辱揭，創(chuàng)建圖片對(duì)象之后才能進(jìn)行繪制
保存到相冊(cè)
Taro.canvasToTempFilePath({
canvasId: '#canvas',
canvas: this.canvas,
success(res) {
Taro.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(saveRes) {
console.log(saveRes, 'saveRes')
}
})
},
fail(fail) {
console.log(fail)
}
})
【筆記不易，如對(duì)您有幫助病附，請(qǐng)點(diǎn)贊问窃，謝謝】
