From bec388ab40e91ddd2a996904d4a5590e8caff33f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=80=81=E5=8F=B6?= Date: Tue, 20 Dec 2022 17:23:06 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=B8=83=E6=94=B9=E5=A4=A7=E5=A4=87?= =?UTF-8?q?=E4=BB=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- commons/js/config.js | 2 +- components/distributePoster/index-画布改大.js | 277 ++++++++++++++++++ 2 files changed, 278 insertions(+), 1 deletion(-) create mode 100644 components/distributePoster/index-画布改大.js diff --git a/commons/js/config.js b/commons/js/config.js index e8b5f94..5fd6040 100644 --- a/commons/js/config.js +++ b/commons/js/config.js @@ -1,4 +1,4 @@ -const env = "p"; +const env = "d"; const version = 1, diff --git a/components/distributePoster/index-画布改大.js b/components/distributePoster/index-画布改大.js new file mode 100644 index 0000000..bcc64a4 --- /dev/null +++ b/components/distributePoster/index-画布改大.js @@ -0,0 +1,277 @@ +import _ from '../../commons/js/commons' +import Canvas from '../../commons/js/utils/canvas' +let isGetImgInfo = false +const app = getApp() +Component({ + //组件的属性列表 + properties: { + source: { + type: String, + value: 'goods' + }, + isShow: { + type: Boolean, + value: false + }, + isCreateQrcode: { + type: Boolean, + value: false + }, + qccodeid: { + type: String, + value: '' + }, + customImg: { + type: String, + value: '' + }, + slogan: { + type: String, + value: '' + }, + moments: { + type: String, + value: '' + }, + }, + + //组件的初始数据 + data: { + //headImg:app.getStorageByKey("userInfo").headimg, + defaultQrcode: _.config.imgUrl + 'common/qr.jpg', + imgs: [], + tempPosterPath: '', + showOptBtn:false,//操作按钮显示 + }, + + attached: function () { + isGetImgInfo = false + }, + + //数据监听 + observers: { + 'isCreateQrcode': function (e) { + if (e) { + this.getMaterialHomeQrcode() + } + }, + 'isShow': function (e) { + if (e) { + this.setData({ + showOptBtn:false, + }) + this.createPoster() + } + }, + 'customImg': function (e) { + if (e) { + // this.setData({ + // headImg:app.getStorageByKey("userInfo").headimg, + // }) + //头像 + //this.getImageInfo(this.data.headImg, 4) + this.getImageInfo(this.data.customImg, 3) + } + }, + }, + + //组件的方法列表 + methods: { + + // 转化网络图片，获取路径 + getImageInfo(src, index) { + let that = this + isGetImgInfo = false + setTimeout(function () { + wx.getImageInfo({ + src: src, + success: (res) => { + let arr = that.data.imgs + arr[index] = res + that.setData({ + imgs: arr + }) + isGetImgInfo = true + }, + fail: (err) => { + console.log('error img is: ' + src) + } + }) + }, 200) + }, + + //获取二维码 + getMaterialHomeQrcode() { + let params = {}; + params['page'] = 'pages/special2/index'; + params['scene'] = this.data.qccodeid+'_'+app.getStorageByKey("userInfo").biz_id; + params['width'] = 1280; + _.apiQuery.getMaterialHomeQrcode(params).then(res => { + this.getImageInfo(res.data.url, 2) + }).catch(res => { + //this.getImageInfo(this.data.defaultQrcode, 2) + }) + }, + + //自定义海报 + customizePoster(CTX){ + + if(this.data.customImg){ + let that = this + this.setData({ + canvasInfo:{ + width: parseFloat(this.data.imgs[3].width)+'px', + height: parseFloat(this.data.imgs[3].height)+'px' + } + }) + + console.log(this.data.imgs[3].width) + console.log(this.data.imgs[3].height) + + //背景 + if (that.data.imgs[3]) { + CTX.drawImage(that.data.imgs[3].path, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height) + } + + // //头像 + // if (that.data.imgs[4]) { + // Canvas.circleImage(CTX,that.data.imgs[4].path,20, (that.data.imgs[3].height-170)/2,22/2) + // } + + // //昵称 + // Canvas.drawTextOverflow(CTX, app.getStorageByKey("userInfo").nickname, 150, 1, 14, '#fff', 20, 46, (that.data.imgs[3].height-132)/2) + + // //标语 + // if (that.data.slogan) { + // Canvas.drawTextOverflow(CTX, that.data.slogan, 200, 2, 11, '#fff', 17, 20, (that.data.imgs[3].height-85)/2) + // } + + // //标语 + // if (that.data.slogan) { + // Canvas.drawTextOverflow(CTX, that.data.slogan, 180, 2, 11, '#666', 17, 20, (that.data.imgs[3].height-100)/2) + // } + + //二维码 + if (that.data.imgs[2]) { + if(this.data.imgs[3].width>this.data.imgs[3].height){ + Canvas.circleImage(CTX,that.data.imgs[2].path,parseFloat(this.data.imgs[3].width)-parseFloat(this.data.imgs[3].height/5.5)-30, parseFloat(this.data.imgs[3].height)-parseFloat(this.data.imgs[3].height/5.5)-30,parseFloat(this.data.imgs[3].height/11)) + }else{ + Canvas.circleImage(CTX,that.data.imgs[2].path,parseFloat(this.data.imgs[3].width)-parseFloat(this.data.imgs[3].width/5.5)-30, parseFloat(this.data.imgs[3].height)-parseFloat(this.data.imgs[3].width/5.5)-30,parseFloat(this.data.imgs[3].width/11)) + } + } + + setTimeout(function(){ + CTX.save() + CTX.draw(true, function () { + wx.hideLoading() + that.saveCanvas() + }) + },200) + + } + + }, + + //生成海报 + createPoster() { + let that = this + wx.showLoading({ + title: '正在生成', + }) + + if(isGetImgInfo){ + this.setData({ + tempPosterPath: '' + }) + let ctx = wx.createCanvasContext('postercanvas', that) + that.customizePoster(ctx) + } + }, + + //临时存储canvas + saveCanvas() { + let that = this + wx.canvasToTempFilePath({ + canvasId: 'postercanvas', + quality: 1, + success: (res) => { + // this.tempFilePath = res.tempFilePath + that.setData({ + 'tempPosterPath': res.tempFilePath + }) + + setTimeout(function () { + that.setData({ + showOptBtn:true, + }) + },200) + + }, + fail: (res) => { + app.printErrorClient('poseterfail',['错误信息：临时存储canvas失败',JSON.stringify(res)]) + } + }, this) + }, + + //保存到相册 + saveToAblum() { + let that = this + wx.saveImageToPhotosAlbum({ + filePath: this.data.tempPosterPath, + success: (res) => { + _.utils.$toast('保存成功') + }, + fail: (err) => { + app.printErrorClient('poseterfail',['错误信息：图片保存失败',JSON.stringify(err)]) + if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') { + _.utils.$toast('您已取消保存') + } else if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') { + _.utils.$modal('提示', '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！', '去授权').then(res => { + if (res) { + wx.openSetting({}) // 打开小程序设置页面，可以设置权限 + } + }) + } + } + }) + }, + + //隐藏海报弹框 + hidePoster() { + this.setData({ + isShow: false + }) + wx.hideLoading() + }, + + //预览图片 + preview() { + wx.previewImage({ + current: this.data.tempPosterPath, // 当前显示图片的http链接 + urls: [this.data.tempPosterPath] // 需要预览的图片http链接列表 + }) + }, + + //推送链接 + pushLink(e) { + if(e.currentTarget.dataset.url){ + _.$router.openUrlScheme(e.currentTarget.dataset.url) + } + }, + + //复制内容 + copyWord(e){ + if(e.currentTarget.dataset.tx){ + wx.setClipboardData({ + data: e.currentTarget.dataset.tx, + success (res) { + _.utils.$toast('复制成功') + } + }) + }else{ + _.utils.$toast('目前无文案') + } + }, + + } +}) \ No newline at end of file