diff --git a/ext.json b/ext.json index 6870c62..ba4e793 100644 --- a/ext.json +++ b/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": "富茂客官开发", diff --git a/pages/index/searchbar/detail/index.js b/pages/index/searchbar/detail/index.js index 55bbce0..f30d9ea 100644 --- a/pages/index/searchbar/detail/index.js +++ b/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 diff --git a/pages/index/searchbar/detail/index.wxml b/pages/index/searchbar/detail/index.wxml index 21cdfcd..65600e4 100644 --- a/pages/index/searchbar/detail/index.wxml +++ b/pages/index/searchbar/detail/index.wxml @@ -117,10 +117,10 @@ - - + + diff --git a/utils/imgurl.js b/utils/imgurl.js index af57fc8..86b51e1 100644 --- a/utils/imgurl.js +++ b/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拼团'