| @@ -4,7 +4,6 @@ const Http = require("../../utils/HttpBasics"); | |||
| const util = require("../../utils/util"); | |||
| const imgurl = require("../../utils/imgurl"); | |||
| Page({ | |||
| /** | |||
| * 页面的初始数据 | |||
| */ | |||
| @@ -13,15 +12,16 @@ Page({ | |||
| windowWidth: wx.getSystemInfoSync().windowWidth, | |||
| windowHeight: wx.getSystemInfoSync().screenHeight, | |||
| totalHeight: 0, | |||
| qrCodeL: '', //小程序码 | |||
| mallname:'',//商场名字 | |||
| qrCodeL: "", //小程序码 | |||
| couponList: [], //活动劵列表 | |||
| canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 | |||
| canvasScale: 1.0 // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 | |||
| }, | |||
| /** | |||
| * 生命周期函数--监听页面加载 | |||
| */ | |||
| onLoad: function (options) { | |||
| onLoad: function(options) { | |||
| let that = this; | |||
| //劵详情 | |||
| if (options && options.couponChannelId) { | |||
| @@ -31,13 +31,14 @@ Page({ | |||
| that.getCouponList(options.merchantId); | |||
| } | |||
| this.getUserInfo(); | |||
| this.getMallInfo(); | |||
| this.begainDrawShareImage(options); | |||
| }, | |||
| /** | |||
| * 获取劵详情 | |||
| */ | |||
| getDetail: function (couponChannelId) { | |||
| getDetail: function(couponChannelId) { | |||
| let that = this; | |||
| // 获取用户信息 | |||
| Http.get({ | |||
| @@ -45,192 +46,196 @@ Page({ | |||
| data: { | |||
| couponChannelId: couponChannelId | |||
| } | |||
| }) | |||
| .then(res => { | |||
| console.log(res) | |||
| that.setData({ | |||
| data: res.data, | |||
| }) | |||
| }) | |||
| }).then(res => { | |||
| that.setData({ | |||
| data: res.data | |||
| }); | |||
| }); | |||
| }, | |||
| /** | |||
| * 获取商户详情 | |||
| */ | |||
| getList: function (id) { | |||
| * 获取商户详情 | |||
| */ | |||
| getList: function(id) { | |||
| let that = this; | |||
| let data; | |||
| data = { | |||
| pageNum: 1, | |||
| pageSize: 15, | |||
| id: id | |||
| } | |||
| }; | |||
| Http.get({ | |||
| url: config.api.merchantList, | |||
| data: data | |||
| }).then(res => { | |||
| that.setData({ | |||
| data: res.data.list[0], | |||
| }) | |||
| }) | |||
| .then(res => { | |||
| that.setData({ | |||
| data: res.data.list[0] | |||
| }); | |||
| }) | |||
| .catch(err => { | |||
| wx.showToast({ | |||
| title: err.errMsg, | |||
| icon: 'none', | |||
| icon: "none", | |||
| duration: 2000, | |||
| mask: false | |||
| }); | |||
| }) | |||
| }); | |||
| }, | |||
| /** | |||
| * 绘制分享海报 | |||
| */ | |||
| begainDrawShareImage(options) { | |||
| wx.showLoading({ | |||
| title: '生成中...', | |||
| }) | |||
| title: "生成中..." | |||
| }); | |||
| var that = this | |||
| var that = this; | |||
| // 适配屏幕 | |||
| let scale = this.data.windowWidth / 375.0 | |||
| let scale = this.data.windowWidth / 375.0; | |||
| this.setData({ | |||
| totalHeight: 767 * scale | |||
| }) | |||
| }); | |||
| // 获取Canvas | |||
| let ctx = wx.createCanvasContext('myCanvas') | |||
| let ctx = wx.createCanvasContext("myCanvas"); | |||
| // 获取宽高 | |||
| let wW = that.data.windowWidth; | |||
| let wH = that.data.windowHeight; | |||
| // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 | |||
| ctx.scale(this.data.canvasScale, this.data.canvasScale) | |||
| ctx.scale(this.data.canvasScale, this.data.canvasScale); | |||
| // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容 | |||
| let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}` | |||
| let bgimg2 = util.getProxyImgUrl(bgimg1) | |||
| let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}`; | |||
| let bgimg2 = util.getProxyImgUrl(bgimg1); | |||
| wx.getImageInfo({ | |||
| src: bgimg2, | |||
| success: function (res) { | |||
| ctx.drawImage(res.path, 0, 0, wW - 20, wH); | |||
| success: function(res) { | |||
| that.drawshopimg(ctx, scale, options); | |||
| ctx.draw(true) | |||
| ctx.draw(true); | |||
| } | |||
| }) | |||
| }); | |||
| }, | |||
| //绘制商品图片 | |||
| drawshopimg(ctx, scale, options) { | |||
| var that = this | |||
| let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int | |||
| let topImageHeight = parseInt(200 * scale) | |||
| let src1 = "" | |||
| let src2 = '' | |||
| var that = this; | |||
| let topImageWidth = parseInt(375 * scale); // 因为小数有时候会请求不到图片,所以转成int | |||
| let topImageHeight = parseInt(260 * 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); | |||
| src1 =that.data.data.coverImg +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; | |||
| src2 = util.getProxyImgUrl(src1); | |||
| } else if (options && options.merchantId) { | |||
| //商户详情海报 | |||
| src1 =that.data.data.merchantImgUrl +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; | |||
| src2 = util.getProxyImgUrl(src1); | |||
| } | |||
| 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) | |||
| success: function(res) { | |||
| // 绘制白色背景 | |||
| ctx.setFillStyle("#fbfbfb"); | |||
| ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight); | |||
| // that.roundRect(ctx,0, 320, that.data.windowWidth, 320,50) | |||
| ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight); | |||
| ctx.setFillStyle("blue"); | |||
| that.roundRect(ctx,12, 270, 330, 150,10) | |||
| that.drawOtherImage(ctx, scale); | |||
| that.drawOtherContent(ctx, scale,options); | |||
| that.darwAvatarArc(ctx, that.data.avatarUrl, 10, 8, 35, 35); | |||
| 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); | |||
| drawOtherContent(ctx, scale,options) { | |||
| //昵称 | |||
| this.drawNormalText(ctx,this.data.nickName,60 * scale,25 * scale,16 * scale,"#000","left","middle",scale); | |||
| this.drawNormalText(ctx," 向您推荐",120 * scale,25 * scale,16 * scale,"#848484","left","middle",scale); | |||
| this.drawNormalText(ctx,"---"+this.data.mallname+"---",175 * scale,530 * scale,16 * scale,"#000","left","middle",scale); | |||
| if (options && options.merchantId) { | |||
| //店铺名 | |||
| this.drawNormalText(ctx,"商户名称:"+this.data.data.merchantName,40 * scale,300 * scale,22 * scale,"#000","left","middle",scale); | |||
| this.drawNormalText(ctx,"商户位置:"+this.data.data.shopVoList[0].buildingName+this.data.data.shopVoList[0].floorName+"--"+this.data.data.shopVoList[0].shopNumber,40 * scale,340 * scale,18 * scale,"#F4AA91","left","middle",scale); | |||
| this.drawNormalText(ctx,"商户电话:"+this.data.data.merchantLinkPhone,40 * scale,380 * scale,16 * scale,"#000","left","middle",scale); | |||
| this.drawNormalText(ctx,"长按识别,进店去看看",155 * scale,500 * 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), 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[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[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); | |||
| 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) | |||
| }, | |||
| // 劵海报绘制 | |||
| 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) | |||
| } else if (options && options.couponChannelId) { | |||
| this.drawNormalText(ctx,"长按识别,享优惠",155 * scale,500 * scale,16 * scale,"#000","left","middle",scale); | |||
| this.drawNormalText(ctx,this.data.data.title,40 * scale,300 * scale,23 * scale,"#000","left","middle",scale); | |||
| this.drawNormalText(ctx,"售价:" + this.data.data.salePriceStr,40 * scale,330 * scale,20* scale,"#F4AA91","left","middle",scale); | |||
| this.drawNormalText(ctx,"原价:" + this.data.data.salePriceStr,120 * scale,330 * scale,16 * scale,"#DFDCDB","left","middle",scale); | |||
| this.drawNormalText(ctx,"适用门店:",40 * scale,360 * scale,16 * scale,"#000","left","middle",scale); | |||
| for(var i=0;i<this.data.data.merchantVoList.length;i++){ | |||
| this.drawNormalText(ctx,this.data.data.merchantVoList[i].merchantName+"、",40 * scale+40*i,390 * scale,16 * scale,"#000","left","middle",scale); | |||
| } | |||
| ctx.draw(true); | |||
| } | |||
| ctx.draw(true); | |||
| }, | |||
| //绘制小程序码 | |||
| drawqrCode(ctx, scale) { | |||
| let coImageWidth = parseInt(120 * scale) | |||
| let coImageHeight = parseInt(120 * scale) | |||
| let src1 = "" | |||
| let src2 = '' | |||
| 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) | |||
| 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) | |||
| 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) | |||
| success: function(res) { | |||
| ctx.drawImage(res.path,25 * scale,435 * scale,coImageWidth,coImageHeight); | |||
| ctx.draw(true); | |||
| } | |||
| }) | |||
| }); | |||
| }, | |||
| // 绘制活动图片 | |||
| drawOtherImage(ctx, scale) { | |||
| var that = this | |||
| var that = this; | |||
| // 如果该商户有活动商品 | |||
| if (that.data.couponList.length > 0) { | |||
| let cotentImageWidth = parseInt(80 * scale) | |||
| let cotentImageHeight = parseInt(80 * scale) | |||
| 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) | |||
| 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) | |||
| success: function(res) { | |||
| ctx.drawImage(res.path,35 * scale + i * 110 * scale,300 * scale,cotentImageWidth,cotentImageHeight); | |||
| } | |||
| }) | |||
| }); | |||
| } | |||
| } | |||
| that.drawqrCode(ctx, scale); | |||
| }, | |||
| //截取商品名 | |||
| substrTile(str) { | |||
| return str.substr(0, 5) + '...' | |||
| return str.substr(0, 5) + "..."; | |||
| }, | |||
| // 绘制只有一行的文字 | |||
| drawNormalText(ctx, str, x, y, font, style, align, baseLine) { | |||
| @@ -241,10 +246,18 @@ Page({ | |||
| ctx.fillText(str, x, y); | |||
| }, | |||
| /* | |||
| * 绘制多行文本,自动换行,超出添加... | |||
| * | |||
| */ | |||
| canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) { | |||
| * 绘制多行文本,自动换行,超出添加... | |||
| * | |||
| */ | |||
| canvasTextAutoLine: function( | |||
| str, | |||
| ctx, | |||
| initX, | |||
| initY, | |||
| lineHeight, | |||
| maxWidth, | |||
| row = 1 | |||
| ) { | |||
| var lineWidth = 0; | |||
| var lastSubStrIndex = 0; | |||
| var currentRow = 1; | |||
| @@ -252,9 +265,9 @@ Page({ | |||
| lineWidth += ctx.measureText(str[i]).width; | |||
| if (lineWidth > maxWidth) { | |||
| currentRow++; | |||
| let newStr = str.substring(lastSubStrIndex, i) | |||
| let newStr = str.substring(lastSubStrIndex, i); | |||
| if (currentRow > row && str.length > i) { | |||
| newStr = str.substring(lastSubStrIndex, i - 2) + '...' | |||
| newStr = str.substring(lastSubStrIndex, i - 2) + "..."; | |||
| } | |||
| ctx.fillText(newStr, initX, initY); | |||
| initY += lineHeight; | |||
| @@ -270,119 +283,182 @@ Page({ | |||
| } | |||
| } | |||
| }, | |||
| //绘制圆角图像 | |||
| darwAvatarArc: function(ctx, src, x, y, w, h = w) { | |||
| /* | |||
| ctx: 画布对象 | |||
| src: 头像缓存路径 | |||
| x: 头像起始位置 横坐标 | |||
| y: 头像起始位置 纵坐标 | |||
| w: 头像宽度 | |||
| h: 头像高度,不传为w | |||
| */ | |||
| // 保存绘图上下文。 | |||
| ctx.save(); | |||
| // 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边 | |||
| ctx.beginPath(); | |||
| // 设创建一个圆可以指定 起始弧度为 0,终止弧度为 2 * Math.PI。 | |||
| // 用 stroke 或者 fill 方法来在 canvas 中画弧线。 | |||
| ctx.arc(x + w / 2, y + h / 2, w / 2, 0, Math.PI * 2, false); | |||
| /* 从原始画布中剪切任意形状和尺寸。 | |||
| 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内( | |||
| 不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。 | |||
| */ | |||
| ctx.clip(); | |||
| // 画头像 | |||
| ctx.drawImage(src, x, y, w, h); | |||
| // 恢复之前保存的绘图上下文。 | |||
| ctx.restore(); | |||
| // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。 | |||
| ctx.draw(true); | |||
| }, | |||
| //绘制圆角矩形 | |||
| roundRect:function(ctx, x, y, w, h, r) { | |||
| ctx.save(); | |||
| if (w < 2 * r) {r = w / 2;} | |||
| if (h < 2 * r){ r = h / 2;} | |||
| ctx.beginPath(); | |||
| // ctx.setStrokeStyle('white'); | |||
| ctx.setFillStyle('white') | |||
| ctx.setLineWidth(4); | |||
| ctx.moveTo(x+r, y); | |||
| ctx.arcTo(x+w, y, x+w, y+h, r); | |||
| ctx.arcTo(x+w, y+h, x, y+h, r); | |||
| ctx.arcTo(x, y+h, x, y, r); | |||
| ctx.arcTo(x, y, x+w, y, r); | |||
| ctx.fill(); | |||
| ctx.closePath(); | |||
| ctx.draw(true); | |||
| }, | |||
| //获取商户优惠劵信息 | |||
| getCouponList: function (id) { | |||
| getCouponList: function(id) { | |||
| let that = this; | |||
| let data; | |||
| data = { | |||
| status: 0, | |||
| merchantId: id, | |||
| pageNum: 1, | |||
| pageSize: 15, | |||
| } | |||
| pageSize: 15 | |||
| }; | |||
| Http.get({ | |||
| url: config.api.listByMerchant, | |||
| data: data | |||
| }).then(res => { | |||
| that.setData({ | |||
| couponList: res.data.page.list, | |||
| qrCode: res.data.qrCode, | |||
| }) | |||
| }) | |||
| .then(res => { | |||
| that.setData({ | |||
| couponList: res.data.page.list, | |||
| qrCode: res.data.qrCode | |||
| }); | |||
| }) | |||
| .catch(err => { | |||
| wx.showToast({ | |||
| title: err.errMsg, | |||
| icon: 'none', | |||
| icon: "none", | |||
| duration: 2000, | |||
| mask: false | |||
| }); | |||
| }) | |||
| }); | |||
| }, | |||
| //获取头像和昵称 | |||
| getUserInfo: function () { | |||
| 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 | |||
| }) | |||
| }) | |||
| }).then(res => { | |||
| that.setData({ | |||
| nickName: res.data.nickName, | |||
| avatarUrl: res.data.avatarUrl | |||
| }); | |||
| }); | |||
| }, | |||
| //商场信息 | |||
| getMallInfo: function() { | |||
| let that = this; | |||
| // 获取用户信息 | |||
| Http.get({ | |||
| url: config.api.getMallInfo, | |||
| data: {} | |||
| }).then(res => { | |||
| console.log(res); | |||
| that.setData({ | |||
| mallname:res.data.name | |||
| }); | |||
| }); | |||
| }, | |||
| /** | |||
| * 保存图片 | |||
| */ | |||
| * 保存图片 | |||
| */ | |||
| saveImage() { | |||
| let that = this | |||
| 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) { | |||
| canvasId: "myCanvas", | |||
| success: function(res) { | |||
| that.saveImageToPhotos(res.tempFilePath); | |||
| }, | |||
| fail: function (res) { | |||
| fail: function(res) { | |||
| wx.showToast({ | |||
| title: '图片生成失败', | |||
| icon: 'none', | |||
| title: "图片生成失败", | |||
| icon: "none", | |||
| duration: 2000 | |||
| }) | |||
| }); | |||
| } | |||
| }) | |||
| }); | |||
| }, | |||
| saveImageToPhotos: function (tempFilePath) { | |||
| saveImageToPhotos: function(tempFilePath) { | |||
| wx.saveImageToPhotosAlbum({ | |||
| filePath: tempFilePath, | |||
| success(result) { | |||
| wx.showToast({ | |||
| title: '保存成功,从相册中分享到朋友圈吧', | |||
| icon: 'none', | |||
| title: "保存成功,从相册中分享到朋友圈吧", | |||
| icon: "none", | |||
| duration: 4000 | |||
| }) | |||
| }); | |||
| }, | |||
| fail: function (err) { | |||
| if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { | |||
| fail: function(err) { | |||
| if ( | |||
| err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || | |||
| err.errMsg === "saveImageToPhotosAlbum:fail auth deny" | |||
| ) { | |||
| // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用 | |||
| wx.showModal({ | |||
| title: '提示', | |||
| content: '需要您授权保存相册', | |||
| title: "提示", | |||
| content: "需要您授权保存相册", | |||
| showCancel: false, | |||
| success: modalSuccess => { | |||
| wx.openSetting({ | |||
| success(settingdata) { | |||
| console.log("settingdata", settingdata) | |||
| if (settingdata.authSetting['scope.writePhotosAlbum']) { | |||
| console.log("settingdata", settingdata); | |||
| if (settingdata.authSetting["scope.writePhotosAlbum"]) { | |||
| wx.showModal({ | |||
| title: '提示', | |||
| content: '获取权限成功,再次点击图片即可保存', | |||
| showCancel: false, | |||
| }) | |||
| title: "提示", | |||
| content: "获取权限成功,再次点击图片即可保存", | |||
| showCancel: false | |||
| }); | |||
| } else { | |||
| wx.showModal({ | |||
| title: '提示', | |||
| content: '获取权限失败,将无法保存到相册哦~', | |||
| showCancel: false, | |||
| }) | |||
| title: "提示", | |||
| content: "获取权限失败,将无法保存到相册哦~", | |||
| showCancel: false | |||
| }); | |||
| } | |||
| }, | |||
| fail(failData) { | |||
| console.log("failData", failData) | |||
| console.log("failData", failData); | |||
| }, | |||
| complete(finishData) { | |||
| console.log("finishData", finishData) | |||
| console.log("finishData", finishData); | |||
| } | |||
| }) | |||
| }); | |||
| } | |||
| }) | |||
| }); | |||
| } | |||
| }, | |||
| }) | |||
| } | |||
| }); | |||
| } | |||
| }) | |||
| }); | |||