效果圖如下所示
.wxml
<view class="canvas-box">
<painter palette="{{template}}" bind:imgOK="onImgOK" />
</view>
<image bindtap="imagxin" src="{{imagePath}}"></image>
.css
page{
overflow: hidden;
}
.canvas-box{
width: 1px;
height: 1px;
position: absolute;
left: -1px;
top: -1px;
float: left;
overflow: hidden;
}
image{
width: 100%;
height: 100vh;
}
.js
Page({
data: {
},
onImgOK(e) {
this.imagePath = e.detail.path;
this.setData({
imagePath: this.imagePath
});
},
onShow:function(e){
let that = this
that.setData({
template: {
"width": "450px",
"height": "820px",
"background": "#fff",
"views": [
{
"type": "image",
"url": '/images/mastergraph.png',
"css": {
"width": "450px",
"top": "0px",
"left": "0px",
}
},
{
"type": "image",
"url": '/images/userprofile.png',
"css": {
"width": "116rpx",
"height": "120rpx",
"top": "664px",
"left": "38px",
"rotate": "0",
"borderRadius": "120.94610063910693px",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "text",
"css": {
"color": "#787878",
"top": "730px",
"left": "30px",
"fontSize": "16px",
},
"text": '林晨:'
},
{
"type": "text",
"css": {
"color": "#000",
"top": "753px",
"left": "30px",
"fontSize": "18px",
},
"text": '邀請你進入飯唄優選'
},
{
"type": "text",
"css": {
"color": "#EF3664",
"top": "788px",
"left": "35px",
"padding": '5px 8px',
"background": '#FCD6DF',
"fontSize": "16px",
},
"text": '長按保存圖片'
},
]
},
});
},
imagxin:function(e){
wx.previewImage({
current: this.data.imagePath, // 當前顯示圖片的http鏈接
urls: [this.data.imagePath] // 需要預覽的圖片http鏈接列表
})
}
})
.json
{
"usingComponents": {
"painter": "/components/painter/painter"
}
}
引入的文件.js
鏈接: https://pan.baidu.com/s/18ZWzfPWcP3u_CxQ22UorNw 提取碼: tzd8
海報如果在真機上不顯示可以參考:https://blog.csdn.net/qq_43764578/article/details/101704775
對你有幫助的話記得收藏點贊,有什麼問題歡迎評論留言。