1 先看效果
手機(jī)截屏
Painter 實(shí)現(xiàn)
2 如何實(shí)現(xiàn)
方式一：Painter
Painter 是一個(gè)微信小程序組件，具體介紹和 API 請(qǐng)參考：GitHub文檔。
在 GitHub 下載下來(lái)之后只需要將 components 下的 painter 文件夾放到項(xiàng)目根目錄下的 wxcomponents 文件夾即可。然后就是如何在 uni-app 中使用微信小程序形式的組件，其實(shí)很簡(jiǎn)單，參考官方文檔：小程序自定義組件支持。
方式二：Canvas
當(dāng)然也可以使用 Canvas 來(lái)實(shí)現(xiàn)上述效果，因?yàn)?Painter 就是基于 Canvas 封裝的。但使用 Canvas 就顯得太過(guò)于麻煩了，具體如何實(shí)現(xiàn)各位可以去網(wǎng)上搜索一下，因?yàn)槲乙矝](méi)有實(shí)現(xiàn)過(guò)。
3 代碼演示
template文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-517146.html
<!--
scaleRatio：縮放比，會(huì)在傳入的 palette 中統(tǒng)一乘以該縮放比，作用和 widthPixels 類似，所以不要同時(shí)使用。使用 2 是為了使圖片更加清晰，微信小程序中 px 和 rpx 剛好也是 2 倍關(guān)系
palette：靜態(tài)模板。見(jiàn)下文 computed 中的 palette
-->
<painter :scaleRatio="2" :palette="palette" @imgOK="imgOK"></painter>
<button @tap="saveImg"></button>
data文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-517146.html
painterStyle: {
rect: {
width: '710rpx',
left: '20rpx',
color: '#fff',
borderRadius: '16rpx'
},
textLeft: {
left: '40rpx',
fontSize: '28rpx',到了這里，關(guān)于uni-app：使用 Painter 在微信小程序?qū)?dāng)前頁(yè)面保存為圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
