海报

component/share/share.js

@@ -26,9 +26,9 @@ Component({
     iconImg: '',
     title: '',
     path: '',
-    QRCodeImagePath:'',
-    QRCodeImageLocalPath:'',
-    groupPurchaseInfo:{}
+    QRCodeImagePath: '',
+    QRCodeImageLocalPath: '',
+    groupPurchaseInfo: {}
   },
 
   /**
@@ -62,13 +62,13 @@ Component({
         })
         .then(() => {
           wx.getImageInfo({
-            src: this.data.QRCodeImagePath,//服务器返回的图片地址
+            src: this.data.QRCodeImagePath, //服务器返回的图片地址
             success: function (res) {
               console.log('下载content成功1')
               console.log(res.path)
               //res.path是网络图片的本地地址
-              ctx.drawImage(res.path, 227, 364, 135, 135);
-
+              ctx.drawImage(res.path, 213, 445, 126, 126);
+              // ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 375, 667); //插入图片  
 
 
 
@@ -77,12 +77,12 @@ Component({
                 wx.canvasToTempFilePath({
                   x: 0,
                   y: 0,
-                  width: 370,
-                  height: 507,
+                  width: 750,
+                  height: 1334,
                   // destWidth: 370,
-                  destWidth: 1110,
+                  destWidth: 1500,
                   // destHeight: 507,
-                  destHeight: 1521,
+                  destHeight: 2668,
                   canvasId: 'myCanvas',
                   success: (res) => {
                     console.log(res.tempFilePath)
@@ -128,7 +128,7 @@ Component({
           iconImg: data.iconImg,
           title: data.title,
           // path: data.path,
-          QRData:{
+          QRData: {
             page: data.path,
             scene: data.scene,
             qrCodeId: this.data.shareId
@@ -145,7 +145,7 @@ Component({
           iconImg: data.iconImg,
           title: data.title,
           // path: data.path,
-          QRData:{
+          QRData: {
             page: data.path,
             scene: data.scene,
             qrCodeId: this.data.shareId
@@ -161,14 +161,14 @@ Component({
       }
     },
     //关闭弹框
-    close: function(e){
+    close: function (e) {
       console.log(e)
       this.setData({
         shareFlag: !this.data.shareFlag,
         imgUrls: ''
       })
     },
-    nothing: function(e){
+    nothing: function (e) {
       return
     },
     // 保存图片到本地
@@ -193,7 +193,7 @@ Component({
             //     // }, () => {
 
             //     // })
-  
+
             //   }
             // });
             console.log(this.data.QRCodeImagePath)
@@ -244,15 +244,17 @@ Component({
           mask: true
         })
         console.log('开始画背景')
-        ctx.rect(0, 0, 370, 507)
-        ctx.setFillStyle('#fff')
-        ctx.fill()
+        // ctx.rect(0, 0, 375, 667)
+        // ctx.setFillStyle('#fff')
+       
+        ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 1500, 2668,0,0,750,1334); //插入图片  
+
+        // ctx.fill()
         ctx.save()
         ctx.beginPath()
-        ctx.setFillStyle('#fff')
+        // ctx.setFillStyle('#fff')
         ctx.fill()
-        ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
-        ctx.clip(); //画
+      
         resolve();
       });
       return background;
@@ -263,12 +265,17 @@ Component({
       let author = new Promise((resolve, reject) => {
         // resolve(() => {
         console.log('开始画头像')
-        ctx.drawImage(this.data.avatar, 148, 8, 100, 100); //插入图片  
+        console.log(this.data.avatar)
+        ctx.arc(51.5, 200.5, 35.5, 0, 2 * Math.PI, false) 
+        ctx.clip(); //剪切头像区域
+        ctx.drawImage(this.data.avatar, 16, 150, 87, 87); //插入图片  
+        // ctx.fill()
         ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
-        ctx.setFontSize(20)
+        ctx.setFontSize(18)
+        // ctx.setFillStyle('#535353')
         ctx.setFillStyle('#535353')
-        ctx.fillText(this.data.author, (370 - ctx.measureText(this.data.author).width) / 2, 115)
-        ctx.setFillStyle('#FF4400')
+        ctx.fillText(this.data.author, 98, 180)
+        
         // })
         resolve();
       })
@@ -279,19 +286,24 @@ Component({
       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)
-        ctx.drawImage(this.data.iconImg, 9, 205, 704, 145);
-        ctx.setFontSize(18)
+        ctx.setFontSize(16)
         ctx.setFillStyle('#000')
-        ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
-        ctx.setFontSize(20)
-        ctx.setFillStyle('red')
-        ctx.fillText('为TA疯狂打CALL', 9, 467)
-        ctx.setFontSize(18)
+        ctx.fillText('已使出洪荒之力，声情并茂的为课文', 90 ,198)
+        ctx.fillText(`配了一段惊世之作`,  90, 240)
+        // ctx.setFontSize(16)
+        // ctx.setFillStyle('red')
+        ctx.fillText(`《${this.data.title}》`, 90, 220)
+        
+        ctx.drawImage('../../../static/image/reading_poster.jpg', 11, 276, 351, 145);
+        ctx.setFontSize(16)
         ctx.setFillStyle('#000')
-        ctx.fillText('长按识别二维码，快去听听', 9, 493)
+        // ctx.setFillStyle('#000')
+        ctx.setFontSize(16)
+        ctx.setFillStyle('#c90000')
+        ctx.fillText('为TA疯狂打CALL', 12, 495)
+        ctx.setFontSize(14)
+        ctx.setFillStyle('#666666')
+        ctx.fillText('长按识别二维码，快去听听', 12, 530)
         // })
         resolve();
       })
@@ -302,33 +314,33 @@ Component({
     drawGroupGut: function (ctx) {
       let group = new Promise((resolve, reject) => {
         //resolve(() => {
-          ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
-          ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
-          ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
-          ctx.setFontSize(14)
-          ctx.setFillStyle('#fff')
-          ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 149, 373)
-          ctx.setFontSize(16)
-          ctx.setFillStyle('#A95A00')
-          ctx.fillText('原价', 20, 373)
-          ctx.setStrokeStyle('red')
-          ctx.moveTo(64, 368)
-          ctx.lineTo(114, 368)
-          ctx.stroke()
-          ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.originPrice / 100).toFixed(2)}元`, 54, 373)
-          ctx.setFontSize(18)
-          ctx.fillText('团购价仅需', 20, 403)
-          ctx.fillText('元', 185, 403)
-          ctx.setFontSize(20)
-          ctx.setFillStyle('red')
-          ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}`, 115, 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.fillText('郎朗读书声是世上最美的声音', 50, 138)
+        ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
+        ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
+        ctx.setFontSize(14)
+        // ctx.setFillStyle('#fff')
+        ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 149, 373)
+        ctx.setFontSize(16)
+        ctx.setFillStyle('#A95A00')
+        ctx.fillText('原价', 20, 373)
+        ctx.setStrokeStyle('red')
+        ctx.moveTo(64, 368)
+        ctx.lineTo(114, 368)
+        ctx.stroke()
+        ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.originPrice / 100).toFixed(2)}元`, 54, 373)
+        ctx.setFontSize(18)
+        ctx.fillText('团购价仅需', 20, 403)
+        ctx.fillText('元', 185, 403)
+        ctx.setFontSize(20)
+        ctx.setFillStyle('red')
+        ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}`, 115, 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)
         //})
         resolve();
       })
@@ -340,7 +352,7 @@ Component({
     PreservationImg: function () {
       wx.saveImageToPhotosAlbum({
         filePath: this.data.imgUrls,
-        success: (res)=> {
+        success: (res) => {
           console.log(res)
           this.setData({
             imgUrls: false

component/share/share.wxml

@@ -16,7 +16,7 @@
        <cover-image class="img" src="{{imgUrls}}"></cover-image>
        <view class="Preservation">
            <image class="PreservationBg" src="../../static/groupImg/Preservation.png"></image>
-           <text bindtap="PreservationImg">点我保存，并分享至朋友圈</text>
+           <text bindtap="PreservationImg">保存到相册中，快去分享吧</text>
        </view>
    </view>
 </view>

component/share/share.wxss

@@ -47,17 +47,21 @@
 }
 
 .img {
-    position: absolute;
-    left: 5rpx;
-    top: 30rpx;
-    width: 740rpx;
-    height: 1014rpx;
+    display: block;
+    /* position: absolute; */
+    /* left: 5rpx; */
+    /* top: 30rpx; */
+    width: 80%;
+    height: 80%;
+    margin: 50rpx auto;
+    /* width: 375rpx; */
+    /* height: 667rpx; */
 }
 
 .Preservation {
     position: absolute;
     left: 15%;
-    bottom: 5%;
+    bottom: 50rpx;
     width: 70%;
     height: 88rpx;
 
@@ -75,7 +79,7 @@
     color: #fff;
     font-size: 36rpx;
     position: absolute;
-    left: 30rpx;
+    left: 43rpx;
     top: 20rpx;
     z-index: 9;
 }

pages/social/works/works.wxml

@@ -68,7 +68,8 @@
         </view>
     </view>
     <!-- 分享框 -->
-    <canvas canvas-id="myCanvas" style="width:370px;z-index=99999; height: 507px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
+    <!-- <canvas canvas-id="myCanvas" style="width:750rpx;z-index=99999; height: 1334rpx;"></canvas> -->
+    <canvas canvas-id="myCanvas" style="width:375px;z-index=99999; height: 668px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
     <shareDialog id="share-dialog" shareType='works' shareId="{{id}}" />
     <!-- 评论框 -->
     <view class="replySection" wx:if="{{replyModal}}">

project.config.json

@@ -36,7 +36,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 7,
+			"current": 8,
 			"list": [
 				{
 					"id": 0,
@@ -86,6 +86,12 @@
 					"name": "replydetails",
 					"pathName": "pages/social/replyDetail/replyDetail",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "课程详情",
+					"pathName": "pages/social/works/works",
+					"query": "id=1541877751982865&title=【课文5】影子"
 				}
 			]
 		}