<template>
<!--分享-->
<view>
<canvas canvas-id="myQrcode" id="myQrcode" style=" border:1px solid #c3c3c3;width:750px;height:1334px;position:fixed;z-index:-1;top:-10000000px; opacity:0;pointer-events: none;" catchtouchmove = "true"></canvas>
<image style="width:520rpx;height:925rpx; " src="{{shareImg}}" ></image>
<view style=" position:fixed; bottom:30rpx;left:0; width:100%;"@tap="saveImage">保存到本地</view>
<button class="share-model-btn"
@tap='setShareInfo'
style=" position:fixed; height:20rpx; bottom:0;left:0; width:100%;"
catchtouchmove = "true">
生成海报
</button>
</view>
</template>
methods = {
// 生成海报- 下载图片 -其他信息准备
async setShareInfo () {
wx.showLoading({
title: '正在生成图片'
})
let that = this
that.productImg = '图片路径'; // 图片路径 后端返回图片路径
that.qrcode = '小程序码路径' ; // 小程序码,后端返回png图片路径。 注意:base64无法绘制
that.productName = '橙子大甩卖橙子大甩卖橙子大甩卖橙子大甩卖橙子大甩卖';
that.price = '100.00';
that.oriPrice = '200.00';
that.$apply()
// 图片下载
return new Promise(async (resolve, reject) => {
that.productImg = await that.downLoadImg(that.productImg)
that.qrcode = await that.downLoadImg(that.qrcode)
resolve(that.productImg, that.qrcode)
that.canvasCreat()
})
},
// 保存图片
saveImage() {
let that = this
// 获取用户是否开启用户授权相册
// console.log('保存到本地')
wx.getSetting({ success(res) {
// 如果没有则获取授权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImg,
success() {
that.shareImgFlag = 0
that.$apply()
wx.showToast({
title: '保存成功'
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
},
fail() {
// (ps:重新打开授权信息,微信api现在只能通过button才能打开授权设置)
}
})
} else {
// 已授权 直接保存
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImg,
success() {
that.shareImgFlag = 0
that.$apply()
wx.showToast({
title: '保存成功'
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
}
})
}
};
// 下载图片,下载到本地,供绘图使用
downLoadImg(url) {
return new Promise(async (resolve, reject) => {
let result = ''
wx.getImageInfo({
src: url,
success (res) {
result = res.path
resolve(result)
},
fail(res) {
// console.log(res, '失败')
wx.showToast({
title: '下载图片失败',
icon: 'none'
})
}
})
})
}
// 绘制海报
canvasCreat() {
return new Promise(async (resolve, reject) => {
const ctx = wx.createCanvasContext('myQrcode')
ctx.setFillStyle('white')
ctx.fillRect(0, 0, 750, 1334)
ctx.stroke() // 不加这句会是下面的arc失效
ctx.draw()
let width = 750
let proName = this.productName.slice(0, 42)
let proPrice = ''
proPrice = '¥ ' + this.price.toFixed(2)
// 画出价格
ctx.setFontSize(30)
ctx.setTextAlign('left')
if (wx.getStorageSync('theme') === 'blue') {
ctx.setFillStyle('#3b99da')
} else {
ctx.setFillStyle('#DD2726')
}
ctx.fillText(
proPrice,
(width / 750) * 54,
(width / 750) * 930
)
let origPrice = '¥ ' + this.oriPrice.toFixed(2)
// 画出产品标题
ctx.setFontSize(32)
ctx.setFillStyle('#333333')
ctx.setTextAlign('left')
const nameWidth = ctx.measureText(proName).width
this.wordsWrap(ctx, proName, nameWidth, 620, 56, 812, 40)
// 画出产品图像
ctx.drawImage(
this.productImg,
(width / 750) * 55,
(width / 750) * 100,
(width / 750) * 640,
(width / 750) * 640
)
// 原价不为0 才绘画
if (this.oriPrice !== 0) {
// 画出原价
ctx.setFontSize(24)
ctx.setTextAlign('left')
ctx.setFillStyle('#CCCCCC')
ctx.fillText(
origPrice,
(width / 750) * 54,
(width / 750) * 978
)
// 画出原价的横线
let dis = (this.oriPrice.toFixed(2).length + 1) * 14
ctx.beginPath()
ctx.moveTo(
(width / 750) * 50,
(width / 750) * 970)
ctx.lineTo(
(width / 750) * 56 + (width / 750) * dis,
(width / 750) * 970)
ctx.setStrokeStyle('#CCCCCC')
ctx.setLineWidth(1)
ctx.setFillStyle('#CCCCCC')
ctx.stroke()
}
ctx.draw(true)
ctx.rect(270, 1035, 240, 240)
ctx.setFillStyle('#ffffff')
ctx.fill()
ctx.drawImage(
this.qrcode,
(width / 750) * 270,
(width / 750) * 1035,
(width / 750) * 210,
(width / 750) * 210
)
// 画出“扫一扫”
ctx.setFontSize(26)
ctx.setTextAlign('left')
ctx.setFillStyle('#333333')
ctx.fillText(
'长按或扫一扫',
(width / 750) * 298,
(width / 750) * 1293
)
ctx.draw(true)
let _this = this
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: (width / 750) * 1080,
height: (width / 750) * 1920,
destWidth: (width / 750) * 1080,
destHeight: (width / 750) * 1920,
canvasId: 'myQrcode',
fileType: 'jpg',
success(res) {
wx.hideLoading()
_this.moveFlag = 0
_this.shareImg = res.tempFilePath
_this.shareImgFlag = 1
_this.$apply()
// 绘画成功
},
fail (err) {
wx.showToast({
title: '生成失败,' + err,
icon: 'none'
})
}
})
}, 1000)
})
}
// 商品标题换行
wordsWrap(ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
let lineWidth = 0
let lastSubStrIndex = 0
for (let i = 0; i < name.length; i++) {
lineWidth += ctx.measureText(name[i]).width
if (lineWidth > maxWidth) {
ctx.setFontSize(32)
ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY)
srartY += wordsHight
lineWidth = 0
lastSubStrIndex = i
}
if (i === name.length - 1) {
ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY)
}
}
}