|
@@ -15,7 +15,7 @@ Component({
|
|
|
* 组件的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
- shareFlag: true,
|
|
|
+ shareFlag: false,
|
|
|
imgUrls: '',
|
|
|
avatar: '',
|
|
|
author: '',
|
|
@@ -31,39 +31,184 @@ Component({
|
|
|
poster: function () {
|
|
|
const that = this;
|
|
|
const ctx = wx.createCanvasContext('myCanvas');
|
|
|
- ctx.rect(0, 0, 370, 507)
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fill()
|
|
|
- ctx.save()
|
|
|
- ctx.beginPath()
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fill()
|
|
|
- ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
|
|
|
- ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
|
|
|
- // wx.downloadFile({
|
|
|
- // url: this.data.avatar,
|
|
|
- // success(res) {
|
|
|
- // ctx.drawImage(res.tempFilePath, 148, 8, 100, 100);
|
|
|
- // }
|
|
|
- // });
|
|
|
- ctx.drawImage(this.data.avatar, 148, 8, 100, 100); //插入图片
|
|
|
- ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('#535353')
|
|
|
- ctx.fillText(this.data.author, (370 - ctx.measureText(this.data.author).width) / 2, 115)
|
|
|
- ctx.setFillStyle('#FF4400')
|
|
|
+ // 先画背景
|
|
|
+ this.drawBg(ctx)
|
|
|
+ .then(() => {
|
|
|
+ // 下载保存图片
|
|
|
+ console.log('背景画完');
|
|
|
+ return this.saveImg(ctx);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // 画头像和作者||发起者
|
|
|
+ console.log('头像画完');
|
|
|
+ return this.drawAuthor(ctx);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ console.log(this.data.shareType)
|
|
|
+ if (this.data.shareType === 'works') {
|
|
|
+ // 分享作品的主题内容
|
|
|
+ console.log('主题画完');
|
|
|
+ return this.drawWorksGut(ctx)
|
|
|
+ } else {
|
|
|
+ return this.drawGroupGut(ctx)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ ctx.drawImage('../../../static/groupImg/code.png', 217, 374, 135, 135);
|
|
|
+ console.log(ctx)
|
|
|
+ ctx.draw(true, function (res) {
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: 370,
|
|
|
+ height: 507,
|
|
|
+ destWidth: 370,
|
|
|
+ destHeight: 507,
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.tempFilePath)
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.path,
|
|
|
+ success(res) {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.setData({
|
|
|
+ imgUrls: res.tempFilePath
|
|
|
+ },()=>{
|
|
|
+ wx.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ share: function (data) {
|
|
|
if (this.data.shareType === 'works') {
|
|
|
+
|
|
|
+ this.setData({
|
|
|
+ shareFlag: !this.data.shareFlag,
|
|
|
+ avatar: data.avatar,
|
|
|
+ author: data.author,
|
|
|
+ iconImg: data.iconImg,
|
|
|
+ title: data.title,
|
|
|
+ // path: data.path,
|
|
|
+ // QRData:{
|
|
|
+ // page: data.path,
|
|
|
+ // scene: "par=no"
|
|
|
+ // }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ if (this.data.shareType === 'group') {
|
|
|
+ console.log('团购分享')
|
|
|
+ this.setData({
|
|
|
+ shareFlag: !this.data.shareFlag
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (this.data.shareType === 'class') {
|
|
|
+ console.log('课程分享')
|
|
|
+ this.setData({
|
|
|
+ shareFlag: !this.data.shareFlag
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存图片到本地
|
|
|
+ saveImg: function () {
|
|
|
+ console.log('yibuububu')
|
|
|
+ let download = new Promise((resolve, reject) => {
|
|
|
+ let downAvatar = () =>{
|
|
|
+ wx.downloadFile({
|
|
|
+ url: this.data.avatar,
|
|
|
+ success: (res) => {
|
|
|
+ console.log('下载头像成功')
|
|
|
+ console.log(this.data.avatar)
|
|
|
+ this.setData({
|
|
|
+ avatar: res.tempFilePath
|
|
|
+ })
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // resolve(()=>{
|
|
|
+ // 下载icon
|
|
|
+ wx.downloadFile({
|
|
|
+ url: this.data.iconImg,
|
|
|
+ success: (res) => {
|
|
|
+ console.log('下载icon成功')
|
|
|
+ console.log(this.data.iconImg)
|
|
|
+ this.setData({
|
|
|
+ iconImg: res.tempFilePath
|
|
|
+ })
|
|
|
+ // 下载头像
|
|
|
+ downAvatar();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 生成二维码并下载
|
|
|
+ // httpRequestApi.createQRCode(this.data.QRData).success(res => {
|
|
|
+ // console.log(data.path)
|
|
|
+ // console.log(res)
|
|
|
+ // })
|
|
|
+
|
|
|
+ // })
|
|
|
+
|
|
|
+ })
|
|
|
+ return download;
|
|
|
+ },
|
|
|
+ // 先画出背景
|
|
|
+ drawBg: function (ctx) {
|
|
|
+ let background = new Promise((resolve, reject) => {
|
|
|
+ wx.showLoading({
|
|
|
+ title: '海报生成中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ console.log('开始画背景')
|
|
|
+ ctx.rect(0, 0, 370, 507)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fill()
|
|
|
+ ctx.save()
|
|
|
+ ctx.beginPath()
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fill()
|
|
|
+ ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
|
|
|
+ ctx.clip(); //画
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ return background;
|
|
|
+ },
|
|
|
+ // 画头像和作者||发起者
|
|
|
+ drawAuthor: function (ctx) {
|
|
|
+
|
|
|
+ let author = new Promise((resolve, reject) => {
|
|
|
+ // resolve(() => {
|
|
|
+ console.log('开始画头像')
|
|
|
+ ctx.drawImage(this.data.avatar, 148, 8, 100, 100); //插入图片
|
|
|
+ ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('#535353')
|
|
|
+ ctx.fillText(this.data.author, (370 - ctx.measureText(this.data.author).width) / 2, 115)
|
|
|
+ ctx.setFillStyle('#FF4400')
|
|
|
+ // })
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ return author;
|
|
|
+ },
|
|
|
+ // 分享作品的主题内容
|
|
|
+ drawWorksGut: function (ctx) {
|
|
|
+ let works = new Promise((resolve, reject) => {
|
|
|
+ // resolve(() => {
|
|
|
+ console.log('开始画内容')
|
|
|
ctx.fillText('已使出洪荒之力,声情并茂的为', (370 - ctx.measureText('已使出洪荒之力,声情并茂的为').width) / 2, 138)
|
|
|
ctx.fillText(`《${this.data.title}》`, (370 - ctx.measureText(`《${this.data.title}》`).width) / 2, 160)
|
|
|
ctx.fillText(`配了一段惊世之作`, (370 - ctx.measureText(`配了一段惊世之作`).width) / 2, 182)
|
|
|
- // 保存图片到本地
|
|
|
- // wx.downloadFile({
|
|
|
- // url: this.data.iconImg,
|
|
|
- // success(res) {
|
|
|
- // console.log(res)
|
|
|
- // ctx.drawImage(res.tempFilePath, 9, 205, 352, 145);
|
|
|
- // }
|
|
|
- // });
|
|
|
ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
|
|
|
ctx.setFontSize(18)
|
|
|
ctx.setFillStyle('#000')
|
|
@@ -74,103 +219,50 @@ Component({
|
|
|
ctx.setFontSize(18)
|
|
|
ctx.setFillStyle('#000')
|
|
|
ctx.fillText('长按识别二维码,快去听听', 9, 493)
|
|
|
-
|
|
|
- } else {
|
|
|
- ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
|
|
|
- ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
|
|
|
- ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
|
|
|
- ctx.setFontSize(14)
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fillText('五人团', 149, 373)
|
|
|
- ctx.setFontSize(16)
|
|
|
- ctx.setFillStyle('#A95A00')
|
|
|
- ctx.fillText('原价', 24, 373)
|
|
|
- ctx.setStrokeStyle('red')
|
|
|
- ctx.moveTo(64, 368)
|
|
|
- ctx.lineTo(114, 368)
|
|
|
- ctx.stroke()
|
|
|
- ctx.fillText('¥99元', 64, 373)
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.fillText('团购价仅需', 20, 403)
|
|
|
- ctx.fillText('元', 144, 403)
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText('¥1', 109, 403)
|
|
|
- ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText('名额有限,售完截止', 9, 467)
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.setFillStyle('#000')
|
|
|
- ctx.fillText('长按识别二维码参加团购', 9, 493)
|
|
|
- }
|
|
|
- ctx.drawImage('../../../static/groupImg/code.png', 217, 374, 135, 135);
|
|
|
- console.log(ctx)
|
|
|
- ctx.draw(true, function (res) {
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- width: 370,
|
|
|
- height: 507,
|
|
|
- destWidth: 370,
|
|
|
- destHeight: 507,
|
|
|
- canvasId: 'myCanvas',
|
|
|
- success: (res) => {
|
|
|
- console.log(res.tempFilePath)
|
|
|
- wx.saveImageToPhotosAlbum({
|
|
|
- filePath: res.path,
|
|
|
- success(res) {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
- that.setData({
|
|
|
- imgUrls: res.tempFilePath
|
|
|
- })
|
|
|
- },
|
|
|
- fail: (res) => {
|
|
|
- console.log(res)
|
|
|
- }
|
|
|
- })
|
|
|
+ // })
|
|
|
+ resolve();
|
|
|
})
|
|
|
+ return works;
|
|
|
},
|
|
|
- share: function (data) {
|
|
|
- console.log(this.data)
|
|
|
- console.log(data)
|
|
|
- // 下载icon
|
|
|
- wx.downloadFile({
|
|
|
- url: data.iconImg,
|
|
|
- success: (res) => {
|
|
|
- this.setData({
|
|
|
- iconImg: res.tempFilePath
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- // 下载头像
|
|
|
- wx.downloadFile({
|
|
|
- url: data.avatar,
|
|
|
- success: (res) => {
|
|
|
- this.setData({
|
|
|
- avatar: res.tempFilePath
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- // 生成二维码并下载
|
|
|
- httpRequestApi.createQRCode({
|
|
|
- page: data.path,
|
|
|
- scene: "par=no"
|
|
|
- }).success(res => {
|
|
|
- console.log(data.path)
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- this.setData({
|
|
|
- shareFlag: !this.data.shareFlag,
|
|
|
- // avatar: data.avatar,
|
|
|
- author: data.author,
|
|
|
- // iconImg: data.iconImg,
|
|
|
- title: data.title,
|
|
|
- path: data.path
|
|
|
+
|
|
|
+ // 分享团购的主体内容
|
|
|
+ drawGroupGut: function (ctx) {
|
|
|
+ let group = new Promise((resolve, reject) => {
|
|
|
+ resolve(() => {
|
|
|
+ ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
|
|
|
+ ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
|
|
|
+ ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
|
|
|
+ ctx.setFontSize(14)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fillText('五人团', 149, 373)
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('#A95A00')
|
|
|
+ ctx.fillText('原价', 24, 373)
|
|
|
+ ctx.setStrokeStyle('red')
|
|
|
+ ctx.moveTo(64, 368)
|
|
|
+ ctx.lineTo(114, 368)
|
|
|
+ ctx.stroke()
|
|
|
+ ctx.fillText('¥99元', 64, 373)
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.fillText('团购价仅需', 20, 403)
|
|
|
+ ctx.fillText('元', 144, 403)
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('red')
|
|
|
+ ctx.fillText('¥1', 109, 403)
|
|
|
+ ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('red')
|
|
|
+ ctx.fillText('名额有限,售完截止', 9, 467)
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.setFillStyle('#000')
|
|
|
+ ctx.fillText('长按识别二维码参加团购', 9, 493)
|
|
|
+ })
|
|
|
})
|
|
|
+ return group();
|
|
|
},
|
|
|
+
|
|
|
+
|
|
|
+ // 保存最终图片
|
|
|
PreservationImg: function () {
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
filePath: this.data.imgUrls,
|