Просмотр исходного кода

[分享海报生成]

tags/江西版6.1.0
luqc 6 лет назад
Родитель
Сommit
c0e4e6f1f6
2 измененных файлов: 100 добавлений и 110 удалений
  1. +99
    -109
      pages/index/searchbar/detail/index.js
  2. +1
    -1
      pages/index/searchbar/detail/index.wxml

+ 99
- 109
pages/index/searchbar/detail/index.js Просмотреть файл

@@ -19,6 +19,7 @@ Page({
imglist: null,
shopVoList: [],
couponList: [], //活动劵列表
qrCodeL:'',//小程序码
currentTab: 0,
isshare: false,
showpost: false,
@@ -68,6 +69,11 @@ Page({
* 绘制分享海报
*/
begainDrawShareImage() {
wx.showLoading({
title: '生成中...',
})

var that = this
// 适配屏幕
let scale = this.data.windowWidth / 375.0
@@ -96,7 +102,7 @@ Page({
success: function(res) {
ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
// 覆盖黑色蒙层
ctx.setFillStyle('rgba(0,0,0,0.3)')
ctx.setFillStyle('rgba(0,0,0,0.3)')
ctx.fillRect(0, 0, topImageWidth, topImageHeight)

ctx.draw(true)
@@ -118,59 +124,57 @@ Page({
//name
ctx.setFillStyle('white');
ctx.setFontSize(30 * scale);
this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 200 * scale, 30 * scale, 258 * scale, 1)
this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 210 * scale, 30 * scale, 258 * scale, 1)
// address
ctx.setFillStyle('#000');
ctx.setFontSize(18 * scale);
this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 270 * scale, 22 * scale, 305 * scale, 1)
// this.drawNormalText(ctx, '探索新鲜好去处', 82 * scale, 596 * scale, 14 * scale, '#3C3C3C', 'left', 'middle', scale);
// this.drawNormalText(ctx, '长按右侧小程序码', 82 * scale, 620 * scale, 12 * scale, '#9A9CAC', 'left', 'middle', scale);
// this.drawNormalText(ctx, '查看更多店铺信息和热评', 82 *scale,635*scale, 12*scale, '#9A9CAC', 'left', 'middle', scale);
this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 265 * scale, 20 * scale, 305 * scale, 1)
// if (this.data.couponList) {
// this.drawNormalText(ctx, '长按右侧小程序码', 102 * scale, 596 * scale, 18 * scale, '#A3A3A3', 'left', 'middle', scale);
// }else{
// this.drawNormalText(ctx, '长按识别小程序码', 102 * scale, 580 * scale, 18 * scale, '#1E1E1E', 'left', 'middle', scale);
// }
ctx.draw(true)

},

// 绘制活动图片
drawOtherImage(ctx, scale) {

let that = this
var that = this
// 如果该商户有活动商品
if (this.data.couponList.length > 0) {
let cotentImageWidth = parseInt(136 * scale)
let cotentImageHeight = parseInt(136 * scale)
for (let i = 0; i < this.data.couponList.length; i++) {
let imageItem = this.data.couponList[i].coverImg
if (that.data.couponList.length>0) {
let cotentImageWidth = parseInt(100 * scale)
let cotentImageHeight = parseInt(100 * scale)
for (let i = 0; i < that.data.couponList.length; i++) {
let imageItem = that.data.couponList[i].coverImg
let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
let src2 = src1.replace(imgOrgUrl, imgNewUrl)
wx.getImageInfo({
src: src1,
src: src2,
success: function(res) {
ctx.drawImage(res.path, 15 * scale + i * 180 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
ctx.drawImage(res.path, 15 * scale + i * 120 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
ctx.draw(true)
}
})
}
//没有活动商品生成小程序码
} else {
if (this.data.qrCode) {
let coImageWidth = parseInt(336 * scale)
let coImageHeight = parseInt(336 * scale)
let src1 = this.data.qrCode + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
let coImageWidth = parseInt(260 * scale)
let coImageHeight = parseInt(260 * scale)
let src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
let src2 = src1.replace(imgOrgUrl, imgNewUrl)
wx.getImageInfo({
src: src1,
src: src2,
success: function(res) {
ctx.drawImage(res.path, 0, 0, coImageWidth, coImageHeight)
ctx.drawImage(res.path, 50 * scale, 320 * scale, coImageWidth, coImageHeight)
ctx.draw(true)
}
})
}
}
// icon
// ctx.setShadow(0, 8 * scale, 20, 'rgba(0,0,0,0.1)')
// ctx.drawImage('./../../../assets/images/download.png', 13 * scale, 590 * scale, 54*scale, 54*scale)
// ctx.setShadow(0, 0, 0, 'white')
// ctx.draw(true)
wx.hideLoading()
},

// 绘制只有一行的文字
@@ -220,90 +224,75 @@ Page({
}
}
},
// 保存图片
saveImage() {
var _this = this
var image = _this.data.poster

wx.getImageInfo({
src: image,
success: function(sres) {
var imgSrc = sres.path;

wx.showLoading({
title: '保存中',
mask: true
})
setTimeout(function() {
wx.saveImageToPhotosAlbum({
filePath: imgSrc,
success: function(data) {
// wx.showToast({
// title: '保存成功',
// icon: 'success',
// duration: 2000
// })
console.log(data)
wx.showModal({
title: '友情提示',
content: '图片保存成功,请到相册查找分享',
success(res) {
if (res.confirm) {

} else if (res.cancel) {

}
// 保存图片
saveImage(){
let that = this
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.data.windowWidth * this.data.canvasScale,
height: this.data.totalHeight * this.data.canvasScale,
canvasId: 'myCanvas',
success: function (res) {
that.saveImageToPhotos(res.tempFilePath);
},
fail: function (res) {
wx.showToast({
title: '图片生成失败',
icon: 'none',
duration: 2000
})
}
})
},
saveImageToPhotos: function (tempFilePath) {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(result) {
wx.showToast({
title: '保存成功,从相册中分享到朋友圈吧',
icon: 'none',
duration: 4000
})
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
// 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success:modalSuccess=>{
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败,将无法保存到相册哦~',
showCancel: false,
})
}
})

},
fail: function(err) {
// console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("当初用户拒绝,再次发起授权")
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败,给出不给权限就无法正常使用的提示')
}
}
})
},
fail(failData) {
console.log("failData",failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
},
complete(res) {
console.log(res);
}
})
wx.hideLoading();
}, 2000)
}
})
},
/**
* 获取access_token
*/
getaccess_token: function(access_token) {
wx.request({
url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,
method: 'POST',
data: {
path: 'pages/index/index', // 必须是已经发布的小程序存在的页面(否则报错)
width: 430,
auto_color: false, // 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调
line_color: {
"r": "0",
"g": "0",
"b": "0"
} // auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
},
success: function(res) {
console.log(res);
})
}
})
}
})
},
},
})
},
/**
* 拨打电话
*/
@@ -410,7 +399,8 @@ Page({
data: data
}).then(res => {
that.setData({
couponList: res.data.list,
couponList: res.data.page.list,
qrCode:res.data.qrCode,
})
})
.catch(err => {


+ 1
- 1
pages/index/searchbar/detail/index.wxml Просмотреть файл

@@ -100,7 +100,7 @@
</view>
</view>
<!-- 分享海报 -->
<view class='postermodal' wx:if="{{showpost}}" bindtap='hideposter'>
<view class='postermodal' wx:if="{{showpost}}" bindtap='hideposter' catchtouchmove='true'>
<canvas canvas-id='myCanvas' class='canvas-content' style='height:{{totalHeight * canvasScale}}px;width:{{375*canvasScale}}px'>
<cover-view class='save-button' bindtap='saveImage'>
<cover-image src="./../../../../assets/images/download.png" class="share-image"></cover-image>


Загрузка…
Отмена
Сохранить