<view>
<canvas class="canvas" style="width: {{canvas_width}}px;height:{{canvas_height}}px;" canvas-id="mycanvas"></canvas>
<view class="pop">
<view class="popbg" bindtap="getclose"></view>
<view class="popup">
<view class="poster">
<image src="{{canvas}}"></image>
</view>
<view class="save">
<view class="down">
<image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20200110105821-1.png">
</image>
</view>
<view bindtap="getsave">保存图片</view>
</view>
</view>
</view>
</view>
.popbg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.popup {
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%);
z-index: 100;
}
.poster {
width: 650rpx;
height: 900rpx;
background: #fff;
border-radius: 30rpx;
overflow: hidden;
}
.save {
margin: 40rpx auto 0;
width: 340rpx;
height: 70rpx;
background: #0C6D4A;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
.down {
width: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}
.save view:nth-child(2) {
color: #fff;
font-size: 28rpx;
margin-left: 20rpx;
}
.canvas {
position: absolute;
top: -9999rpx;
left: 0;
width: 650rpx;
height: 800rpx;
}
image {
width: 100%;
height: 100%;
}
Page({
data: {
canvas: '',
canvas_width: 650,
canvas_height: 900,
main: "https://sucai.suoluomei.cn/sucai_zs/images/20191209160052-2.png",
logo: "https://sucai.suoluomei.cn/sucai_zs/images/20190919150508-logo.png",
explain: "宝宝生病老不好,打一针就好了",
code: "https://sucai.suoluomei.cn/sucai_zs/images/20191123112141-2.png"
},
onLoad: function (options) {
var logo = this.data.logo
var main = this.data.main
var explain = this.data.explain
var code = this.data.code
this.getcanvas(logo, main, explain, code)
},
getcanvas(logo, main, explain, code) {
wx.showLoading({
title: '加载中',
})
let primary = ""
let primary_width = ""
let primary_height = ""
let mark = ""
let mark_width = ""
let mark_height = ""
let yard = ""
let yard_width = ""
let yard_height = ""
wx.getImageInfo({
src: main,
success: (res) => {
primary = res.path
primary_width = res.width
primary_height = res.height
},
})
wx.getImageInfo({
src: logo,
success: (res) => {
mark = res.path
mark_width = res.width
mark_height = res.height
console.log(mark_height)
},
})
wx.getImageInfo({
src: code,
success: (res) => {
yard = res.path
yard_width = res.width
yard_height = res.height
},
})
setTimeout(() => {
let ctx = wx.createCanvasContext('mycanvas')
ctx.rect(0, 0, this.data.canvas_width, this.data.canvas_height)
ctx.setFillStyle('#fff')
ctx.fill()
ctx.drawImage(mark, 30, 30, mark_width, mark_height)
ctx.moveTo(mark_width + 40, 30)
ctx.lineTo(mark_width + 40, mark_height + 30)
ctx.stroke()
ctx.setFontSize(28)
ctx.setFillStyle('#000')
ctx.fillText('美肤小程序', mark_width + 50, mark_width / 2 + 15)
ctx.drawImage(primary, this.data.canvas_width / 2 - primary_width / 2.4, 140, primary_width / 1.2, primary_height / 1.2)
ctx.setFontSize(24)
ctx.setTextAlign('center')
ctx.setFillStyle('#666')
ctx.fillText(explain, 325, 500)
ctx.fillText('你的好友给你推荐了一节课程,块来了解一下吧', 325, 550)
ctx.drawImage(yard, this.data.canvas_width / 2 - yard_width / 2.4, 600, yard_width / 1.2, yard_height / 1.2)
ctx.draw(true, () => {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
wx.hideLoading()
console.log(res.tempFilePath)
this.setData({
canvas: res.tempFilePath
})
},
})
})
}, 1000)
},
getsave() {
wx.saveImageToPhotosAlbum({
filePath: this.data.canvas,
success(res) {
console.log(res)
}
})
}
})