ソースを参照

[商户列表][新增][生成分享海报]

tags/江西版6.1.0
luqc 6年前
コミット
865b50e9d7
4個のファイルの変更102行の追加74行の削除
  1. +1
    -0
      ext.json
  2. +94
    -71
      pages/index/searchbar/detail/index.js
  3. +3
    -3
      pages/index/searchbar/detail/index.wxml
  4. +4
    -0
      utils/imgurl.js

+ 1
- 0
ext.json ファイルの表示

@@ -9,6 +9,7 @@
"ifHaveWebSocket": "0",
"ifHaveCarModular": "1",
"imgOrgUrl": "https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn",
"imgOrgUrl1": "https: //s3.cn-northwest-1.amazonaws.com.cn",
"imgNewUrl": "https://ciformall.youlane.cn/img"
},
"name": "富茂客官开发",


+ 94
- 71
pages/index/searchbar/detail/index.js ファイルの表示

@@ -3,6 +3,7 @@ const imgurl = require("../../../../utils/imgurl");
const config = require("../../../../config/config");
const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {}
let imgOrgUrl = extConfig.attr.imgOrgUrl;
let imgOrgUrl1 = extConfig.attr.imgOrgUrl1;
let imgNewUrl = extConfig.attr.imgNewUrl;
let app = getApp();
Page({
@@ -11,6 +12,7 @@ Page({
* 页面的初始数据
*/
data: {
poterbg: imgurl.poterbg.url,
teljpgUrl: imgurl.teljpg.url,
share01: imgurl.share01.url,
actUrl: imgurl.act.url,
@@ -25,8 +27,8 @@ Page({
showpost: false,
imgHeight: 0,
id: null,
windowWidth: 0,
windowHeight: 0,
windowWidth: wx.getSystemInfoSync().windowWidth,
windowHeight: wx.getSystemInfoSync().screenHeight,
totalHeight: 0,
canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
},
@@ -55,15 +57,7 @@ Page({
currentTab: 0
})
}
// 获取到屏幕的宽高等信息
wx.getSystemInfo({
success: function(res) {
that.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight
})
}
})
this.getUserInfo()
},
/**
* 绘制分享海报
@@ -83,66 +77,77 @@ Page({
})
// 获取Canvas
let ctx = wx.createCanvasContext('myCanvas')

// 获取宽高
let wW = that.data.windowWidth;
let wH = that.data.windowHeight;
// 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
ctx.scale(this.data.canvasScale, this.data.canvasScale)

// 绘制主背景白色
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
ctx.draw()

// 绘制背景图
let bgimg1 = this.data.poterbg + `?imageView/2/w/${wW}/h/${wH}`
let bgimg2 = bgimg1.replace(imgOrgUrl1, imgNewUrl)
ctx.drawImage(bgimg2, 0, 0, wW, wH);
//绘制头像
let avatar1 = this.data.avatarUrl + `?imageView/2/w/${wW}/h/${wH}`
let avatar2 = avatar1.replace(imgOrgUrl, imgNewUrl)
ctx.drawImage(avatar2, 15, 10, 30*scale,30*scale);
// 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int
let topImageHeight = parseInt(250 * scale)
let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int
let topImageHeight = parseInt(200 * scale)
let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
let src2 = src1.replace(imgOrgUrl, imgNewUrl)
wx.getImageInfo({
src: src2,
success: function(res) {
ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
// 覆盖黑色蒙层
ctx.setFillStyle('rgba(0,0,0,0.3)')
ctx.fillRect(0, 0, topImageWidth, topImageHeight)

ctx.draw(true)

// 绘制白色背景
ctx.setFillStyle('#fff')
ctx.fillRect(25,45, topImageWidth+10, topImageHeight+10)
ctx.draw()
ctx.drawImage(res.path, 30,50, topImageWidth, topImageHeight)
that.drawOtherContent(ctx, scale)
that.drawOtherImage(ctx, scale)
}
})
},

//获取头像和昵称
getUserInfo: function () {
let that = this;
// 获取用户信息
Http.get({
url: config.api.getScore,
data: {}
})
.then(res => {
console.log(res)
that.setData({
nickName: res.data.nickName,
avatarUrl: res.data.avatarUrl
})
})
},
// 绘制除了图片之外的剩余内容
drawOtherContent(ctx, scale) {

// 绘制中间的灰色背景
ctx.setFillStyle('rgba(246,246,246,1)')
//(x轴,y轴,宽,高)
ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 58 * scale)

//name
ctx.setFillStyle('white');
ctx.setFontSize(30 * scale);
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, 265 * scale, 20 * scale, 305 * scale, 1)
//昵称
this.drawNormalText(ctx, this.data.nickName+" 向您推荐", 50 * scale, 25 * scale, 16 * scale, '#fff', 'left', 'middle', scale);
//店铺名
this.drawNormalText(ctx, this.data.data.merchantName, 180 * scale, 280 * scale, 30 * scale, '#fff', 'center', 'middle', scale);
//店铺电话
// this.drawNormalText(ctx, "商铺电话:"+this.data.data.merchantLinkPhone, 100 * scale, 405 * scale, 16 * scale, '#000', 'left', 'middle', scale);
if (this.data.couponList.length>0) {
for (let i = 0; i < this.data.couponList.length; i++) {
// 第一个商品信息
this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 15 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale);
this.drawNormalText(ctx, "价格:"+this.data.couponList[1].salePrice, 15 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 40 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale);
this.drawNormalText(ctx, "价格:"+this.data.couponList[1].salePrice, 40 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
//第二个商品信息
this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 130 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale);
this.drawNormalText(ctx, "价格:"+this.data.couponList[2].salePrice, 130 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 155 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale);
this.drawNormalText(ctx, "价格:"+this.data.couponList[2].salePrice, 155 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
//第三个商品信息
this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 255 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale);
this.drawNormalText(ctx, "价格:"+this.data.couponList[3].salePrice, 255 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 270 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale);
this.drawNormalText(ctx, "价格:"+this.data.couponList[3].salePrice, 270 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
}
this.drawNormalText(ctx, "点击下载保存海报到相册", 185 * scale, 506 * scale, 16 * scale, '#000', 'left', 'middle', scale);
}
this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale);
ctx.draw(true)

},
@@ -155,10 +160,8 @@ Page({
var that = this
// 如果该商户有活动商品
if (that.data.couponList.length>0) {
let cotentImageWidth = parseInt(100 * scale)
let cotentImageHeight = parseInt(100 * scale)
let src3 = this.data.qrCode + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`//小程序码
let src4 = src3.replace(imgOrgUrl, imgNewUrl)
let cotentImageWidth = parseInt(80 * scale)
let cotentImageHeight = parseInt(80 * 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}`
@@ -167,40 +170,31 @@ Page({
wx.getImageInfo({
src: src2,
success: function(res) {
ctx.drawImage(res.path, 15 * scale + i * 120 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
ctx.draw(true)
// ctx.setFillStyle('rgba(255,255,255,0.3)')
// ctx.fillRect(25,300, 300*scale, 200*scale)
// ctx.draw(true)
ctx.drawImage(res.path, 45 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
}
})
}
//有活动商品小程序码
wx.getImageInfo({
src: src4,
success: function(res) {
ctx.drawImage(res.path, 15 * scale * scale, 450 * scale, 150, 150)
ctx.draw(true)
}
})
//没有活动商品生成小程序码
} else {
}
if (this.data.qrCode) {
let coImageWidth = parseInt(260 * scale)
let coImageHeight = parseInt(260 * scale)
let coImageWidth = parseInt(120 * scale)
let coImageHeight = parseInt(120 * scale)
let src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
let src2 = src1.replace(imgOrgUrl, imgNewUrl)
wx.getImageInfo({
src: src2,
success: function(res) {
ctx.drawImage(res.path, 50 * scale, 320 * scale, coImageWidth, coImageHeight)
ctx.drawImage(res.path, 115 * scale, 425 * scale, coImageWidth, coImageHeight)
ctx.draw(true)
}
})
}
}
wx.hideLoading()
},

// 绘制只有一行的文字
drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
ctx.setFontSize(font);
@@ -248,6 +242,35 @@ Page({
}
}
},
/**
* 图片预览方法
* 此处注意的一点就是,调用 "wx.previewImage"时,第二个参数要求为数组形式哦
* 当然,做过图片上传功能的应该会注意到,如果涉及到多张图片预览,图片链接数组集合即为参数 urls!
*/
previewImage: function() {
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) {
var current = res.tempFilePath;
wx.previewImage({
current: current,
urls: [current]
})
},
fail: function (res) {
wx.showToast({
title: '图片生成失败',
icon: 'none',
duration: 2000
})
}
})
},
// 保存图片
saveImage(){
let that = this


+ 3
- 3
pages/index/searchbar/detail/index.wxml ファイルの表示

@@ -117,10 +117,10 @@
</view>
<!-- 分享海报 -->
<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'>
<canvas bindlongtap='previewImage' canvas-id='myCanvas' class='canvas-content' style="width:{{windowWidth}}px;height:{{windowHeight}}px;box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.05);" >
<!-- <cover-view class='save-button' bindtap='saveImage'>
<cover-image src="./../../../../assets/images/download.png" class="share-image"></cover-image>
</cover-view>
</cover-view> -->
</canvas>
</view>
</view>


+ 4
- 0
utils/imgurl.js ファイルの表示

@@ -513,6 +513,10 @@ module.exports = {
'url': baseUrl + 'lqcbarcode.png',
'name': '二维码'
},
'poterbg': {
'url': baseUrl + 'canvas.png',
'name': '海报背景'
},
'newgroup': {
'url': baseUrl + 'newgroup.png',
'name': '新UI拼团'


読み込み中…
キャンセル
保存