From d18ad551c2148ab4bbc205a0dd674ee9acc9214a Mon Sep 17 00:00:00 2001 From: Stormeye Wu Date: Mon, 27 May 2019 09:40:21 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=9B=BE=E7=89=87][=E4=BF=AE=E6=94=B9]:?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=BB=A3=E7=90=86=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/canvas/index.js | 396 ++++++++++++++++++++---------------------- 1 file changed, 188 insertions(+), 208 deletions(-) diff --git a/pages/canvas/index.js b/pages/canvas/index.js index 04a795a..bfd6ef1 100644 --- a/pages/canvas/index.js +++ b/pages/canvas/index.js @@ -3,11 +3,6 @@ var app = getApp(); const Http = require("../../utils/HttpBasics"); const util = require("../../utils/util"); const imgurl = require("../../utils/imgurl"); -const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {} -let imgOrgUrl = extConfig.attr.imgOrgUrl; -let imgOrgUrl1 = extConfig.attr.imgOrgUrl1; -let imgNewUrl = extConfig.attr.imgNewUrl; -let imgNewUrl1 = extConfig.attr.imgNewUrl1; Page({ /** @@ -26,19 +21,19 @@ Page({ /** * 生命周期函数--监听页面加载 */ - onLoad: function(options) { + onLoad: function (options) { let that = this; //劵详情 - if (options && options.couponChannelId){ + if (options && options.couponChannelId) { that.getDetail(options.couponChannelId); - }else if(options && options.merchantId){ + } else if (options && options.merchantId) { that.getList(options.merchantId); that.getCouponList(options.merchantId); } this.getUserInfo(); this.begainDrawShareImage(options); }, - + /** * 获取劵详情 */ @@ -58,10 +53,10 @@ Page({ }) }) }, - /** - * 获取商户详情 - */ - getList: function(id) { + /** + * 获取商户详情 + */ + getList: function (id) { let that = this; let data; data = { @@ -70,13 +65,13 @@ Page({ id: id } Http.get({ - url: config.api.merchantList, - data: data - }).then(res => { - that.setData({ - data: res.data.list[0], - }) + url: config.api.merchantList, + data: data + }).then(res => { + that.setData({ + data: res.data.list[0], }) + }) .catch(err => { wx.showToast({ title: err.errMsg, @@ -104,203 +99,188 @@ Page({ let ctx = wx.createCanvasContext('myCanvas') // 获取宽高 let wW = that.data.windowWidth; - let wH = that.data.windowHeight; + let wH = that.data.windowHeight; // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 ctx.scale(this.data.canvasScale, this.data.canvasScale) // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容 let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}` - let bgimg2 = bgimg1.replace(this.getimgurl(this.data.poterbg), this.getnewimgurl(this.data.poterbg)) + let bgimg2 = util.getProxyImgUrl(bgimg1) wx.getImageInfo({ src: bgimg2, - success: function(res) { - ctx.drawImage(res.path, 0, 0, wW-20, wH); - that.drawshopimg(ctx, scale,options); - ctx.draw(true) + success: function (res) { + ctx.drawImage(res.path, 0, 0, wW - 20, wH); + that.drawshopimg(ctx, scale, options); + ctx.draw(true) } }) - - }, - //判断图片路径 - getimgurl(str){ - if(str.indexOf(imgOrgUrl)!=-1){ - return imgOrgUrl - }else if(str.indexOf(imgOrgUrl1)!=-1){ - return imgOrgUrl1; - } + }, - getnewimgurl(str){ - if(str.indexOf(imgOrgUrl)!=-1){ - return imgNewUrl - }else if(str.indexOf(imgOrgUrl1)!=-1){ - return imgNewUrl1; + //绘制商品图片 + drawshopimg(ctx, scale, options) { + var that = this + let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int + let topImageHeight = parseInt(200 * scale) + let src1 = "" + let src2 = '' + //劵详情海报 + if (options && options.couponChannelId) { + src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` + src2 = util.getProxyImgUrl(src1) + this.drawNormalText(ctx, "长按二维码识别小程序享优惠", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); + } else if (options && options.merchantId) {//商户详情海报 + src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` + src2 = util.getProxyImgUrl(src1) + this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); } - }, - //绘制商品图片 - drawshopimg(ctx, scale,options){ - var that = this - let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int - let topImageHeight = parseInt(200 * scale) - let src1="" - let src2='' - //劵详情海报 - if(options && options.couponChannelId){ - src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` - src2 = src1.replace(that.getimgurl(that.data.data.coverImg), that.getnewimgurl(that.data.data.coverImg)) - this.drawNormalText(ctx, "长按二维码识别小程序享优惠", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); - }else if(options && options.merchantId){//商户详情海报 - src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` - src2 = src1.replace(that.getimgurl(that.data.data.merchantImgUrl), that.getnewimgurl(that.data.data.merchantImgUrl)) - this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); - } - wx.getImageInfo({ - src: src2, - success: function(res) { - if(options && options.merchantId){ - // 绘制白色背景 - ctx.setFillStyle('#fff') - ctx.fillRect(15, 45, topImageWidth + 10, topImageHeight + 10) - ctx.drawImage(res.path, 20, 50, topImageWidth, topImageHeight) - that.drawOtherImage(ctx, scale) - that.drawOtherContent(ctx, scale) - }else if((options && options.couponChannelId)){ - ctx.setFillStyle('#fff') - ctx.fillRect(15, 95, topImageWidth + 10, topImageHeight + 10) + wx.getImageInfo({ + src: src2, + success: function (res) { + if (options && options.merchantId) { + // 绘制白色背景 + ctx.setFillStyle('#fff') + ctx.fillRect(15, 45, topImageWidth + 10, topImageHeight + 10) + ctx.drawImage(res.path, 20, 50, topImageWidth, topImageHeight) + that.drawOtherImage(ctx, scale) + that.drawOtherContent(ctx, scale) + } else if ((options && options.couponChannelId)) { + ctx.setFillStyle('#fff') + ctx.fillRect(15, 95, topImageWidth + 10, topImageHeight + 10) ctx.drawImage(res.path, 20, 100, topImageWidth, topImageHeight) that.drawCouponContent(ctx, scale) that.drawqrCode(ctx, scale); + } + wx.hideLoading() } - wx.hideLoading() - } - }) -}, -// 商户海报绘制 -drawOtherContent(ctx, scale) { - //昵称 - this.drawNormalText(ctx, this.data.nickName+" 向您推荐", 20 * 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); - 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), 30 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); - this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 30 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); - //第二个商品信息 - this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 145 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); - this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 145 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); - //第三个商品信息 - this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 260 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); - this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 260 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); + }) + }, + // 商户海报绘制 + drawOtherContent(ctx, scale) { + //昵称 + this.drawNormalText(ctx, this.data.nickName + " 向您推荐", 20 * 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); + 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), 30 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); + this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 30 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); + //第二个商品信息 + this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 145 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); + this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 145 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); + //第三个商品信息 + this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 260 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); + this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 260 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); + } + } - } - - ctx.draw(true) + ctx.draw(true) -}, -// 劵海报绘制 -drawCouponContent(ctx, scale) { - //昵称 - this.drawNormalText(ctx, this.data.data.title, 20 * scale, 25 * scale, 30 * scale, '#fff', 'left', 'middle', scale); - this.drawNormalText(ctx, "售价:"+this.data.data.salePriceStr, 50 * scale, 65 * scale, 30 * scale, '#fff', 'left', 'middle', scale); - ctx.draw(true) + }, + // 劵海报绘制 + drawCouponContent(ctx, scale) { + //昵称 + this.drawNormalText(ctx, this.data.data.title, 20 * scale, 25 * scale, 30 * scale, '#fff', 'left', 'middle', scale); + this.drawNormalText(ctx, "售价:" + this.data.data.salePriceStr, 50 * scale, 65 * scale, 30 * scale, '#fff', 'left', 'middle', scale); + ctx.draw(true) -}, -//绘制小程序码 -drawqrCode(ctx, scale) { - let coImageWidth = parseInt(120 * scale) - let coImageHeight = parseInt(120 * scale) - let src1="" - let src2='' - if(this.data.qrCode){ - src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` - src2 = src1.replace(this.getimgurl(this.data.qrCode), this.getnewimgurl(this.data.qrCode)) - }else{ - src1 = this.data.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` - src2 = src1.replace(this.getimgurl(this.data.data.qrCode), this.getnewimgurl(this.data.data.qrCode)) - } - wx.getImageInfo({ - src: src2, - success: function(res) { - ctx.drawImage(res.path, 125 * scale, 425 * scale, coImageWidth, coImageHeight) - ctx.draw(true) - } - }) -}, - // 绘制活动图片 - drawOtherImage(ctx, scale) { - var that = this - // 如果该商户有活动商品 - if (that.data.couponList.length > 0) { - 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}` - let src2 = src1.replace(this.getimgurl(imageItem), this.getnewimgurl(imageItem)) - wx.getImageInfo({ - src: src2, - success: function(res) { - ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) - } - }) + }, + //绘制小程序码 + drawqrCode(ctx, scale) { + let coImageWidth = parseInt(120 * scale) + let coImageHeight = parseInt(120 * scale) + let src1 = "" + let src2 = '' + if (this.data.qrCode) { + src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` + src2 = util.getProxyImgUrl(src1) + } else { + src1 = this.data.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` + src2 = util.getProxyImgUrl(src1) } + wx.getImageInfo({ + src: src2, + success: function (res) { + ctx.drawImage(res.path, 125 * scale, 425 * scale, coImageWidth, coImageHeight) + ctx.draw(true) + } + }) + }, + // 绘制活动图片 + drawOtherImage(ctx, scale) { + var that = this + // 如果该商户有活动商品 + if (that.data.couponList.length > 0) { + 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}` + let src2 = util.getProxyImgUrl(src1) + wx.getImageInfo({ + src: src2, + success: function (res) { + ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) + } + }) + } - } - that.drawqrCode(ctx, scale); -}, + } + that.drawqrCode(ctx, scale); + }, //截取商品名 substrTile(str) { return str.substr(0, 5) + '...' }, -// 绘制只有一行的文字 -drawNormalText(ctx, str, x, y, font, style, align, baseLine) { - ctx.setFontSize(font); - ctx.setFillStyle(style); - ctx.setTextAlign(align); - ctx.setTextBaseline(baseLine); - ctx.fillText(str, x, y); -}, -/* -* 绘制多行文本,自动换行,超出添加... -* -*/ -canvasTextAutoLine: function(str, ctx, initX, initY, lineHeight, maxWidth, row = 1) { - var lineWidth = 0; - var lastSubStrIndex = 0; - var currentRow = 1; - for (let i = 0; i < str.length; i++) { - lineWidth += ctx.measureText(str[i]).width; - if (lineWidth > maxWidth) { - currentRow++; - let newStr = str.substring(lastSubStrIndex, i) - if (currentRow > row && str.length > i) { - newStr = str.substring(lastSubStrIndex, i - 2) + '...' - } - ctx.fillText(newStr, initX, initY); - initY += lineHeight; - lineWidth = 0; - lastSubStrIndex = i; + // 绘制只有一行的文字 + drawNormalText(ctx, str, x, y, font, style, align, baseLine) { + ctx.setFontSize(font); + ctx.setFillStyle(style); + ctx.setTextAlign(align); + ctx.setTextBaseline(baseLine); + ctx.fillText(str, x, y); + }, + /* + * 绘制多行文本,自动换行,超出添加... + * + */ + canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) { + var lineWidth = 0; + var lastSubStrIndex = 0; + var currentRow = 1; + for (let i = 0; i < str.length; i++) { + lineWidth += ctx.measureText(str[i]).width; + if (lineWidth > maxWidth) { + currentRow++; + let newStr = str.substring(lastSubStrIndex, i) + if (currentRow > row && str.length > i) { + newStr = str.substring(lastSubStrIndex, i - 2) + '...' + } + ctx.fillText(newStr, initX, initY); + initY += lineHeight; + lineWidth = 0; + lastSubStrIndex = i; - if (currentRow > row) { - break; + if (currentRow > row) { + break; + } + } + if (i == str.length - 1) { + ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY); } } - if (i == str.length - 1) { - ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY); + }, + //获取商户优惠劵信息 + getCouponList: function (id) { + let that = this; + let data; + data = { + status: 0, + merchantId: id, + pageNum: 1, + pageSize: 15, } - } -}, -//获取商户优惠劵信息 -getCouponList: function(id) { - let that = this; - let data; - data = { - status: 0, - merchantId: id, - pageNum: 1, - pageSize: 15, - } - Http.get({ + Http.get({ url: config.api.listByMerchant, data: data }).then(res => { @@ -309,23 +289,23 @@ getCouponList: function(id) { qrCode: res.data.qrCode, }) }) - .catch(err => { - wx.showToast({ - title: err.errMsg, - icon: 'none', - duration: 2000, - mask: false - }); - }) -}, + .catch(err => { + wx.showToast({ + title: err.errMsg, + icon: 'none', + duration: 2000, + mask: false + }); + }) + }, //获取头像和昵称 - getUserInfo: function() { + getUserInfo: function () { let that = this; // 获取用户信息 Http.get({ - url: config.api.getScore, - data: {} - }) + url: config.api.getScore, + data: {} + }) .then(res => { console.log(res) that.setData({ @@ -334,9 +314,9 @@ getCouponList: function(id) { }) }) }, - /** - * 保存图片 - */ + /** + * 保存图片 + */ saveImage() { let that = this wx.canvasToTempFilePath({ @@ -345,10 +325,10 @@ getCouponList: function(id) { width: this.data.windowWidth * this.data.canvasScale, height: this.data.totalHeight * this.data.canvasScale, canvasId: 'myCanvas', - success: function(res) { + success: function (res) { that.saveImageToPhotos(res.tempFilePath); }, - fail: function(res) { + fail: function (res) { wx.showToast({ title: '图片生成失败', icon: 'none', @@ -357,7 +337,7 @@ getCouponList: function(id) { } }) }, - saveImageToPhotos: function(tempFilePath) { + saveImageToPhotos: function (tempFilePath) { wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success(result) { @@ -367,7 +347,7 @@ getCouponList: function(id) { duration: 4000 }) }, - fail: function(err) { + fail: function (err) { if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用 wx.showModal({