卡片生成更新

src/components/Detail.vue

@@ -112,7 +112,7 @@ export default {
     },
     activated() {
         // this.hiddenBar();
-        // this.getCanvasDrawImage()
+        
         this.kongtuLock = false;
 
         let id = this.$route.query.id;
@@ -354,25 +354,104 @@ export default {
         },
         getCanvasDrawImage(imgUrl) {
            try {
-                var _this = this
+            var _this = this
             var canvas = document.createElement('canvas')
+            // document.body.appendChild(canvas)
             canvas.width = '960'
             canvas.height = '1338'
             var ctx=canvas.getContext("2d")
             var img = new Image()
-           
-            img.src = require('../../static/shareBg.png')
+            
+           console.log(this.pictureInfo.avatar)
+            img.src = require('../../static/shareBg2.png')
             
             img.onload = function (params) {
-                ctx.drawImage(img, 0,0,960, 1338)
                 var img2 = new Image()
-                img2.src = imgUrl || require('../../static/upload.jpg')
+                img2.setAttribute("crossOrigin",'Anonymous')
+                // img2.src = imgUrl || require('../../static/upload.jpg')
+                console.log(_this.pictureInfo.image)
+                img2.src = _this.pictureInfo.image
                 img.setAttribute("crossOrigin",'Anonymous')
                 img2.setAttribute("crossOrigin",'Anonymous')
+                ctx.drawImage(img, 0,0,960, 1338)
+                var avatar = new Image()
+                var circleR = 32.5 ;//半径
+                var circleX = 144;//圆心X坐标
+                var circleY = 1160 ;//圆心Y坐标
+                var imgX = circleX - circleR;//图片X开始坐标
+                var imgY = circleY - circleR;//图片Y开始坐标
+                var imgWidth = 2 * circleR;//图片按圆形大小
+                var userNameX = 212
+                var userNameY = 1170
+                var titleX = 90
+                var titleY = 1083
+                ctx.fillStyle = "#0b5bab";
+                ctx.textAlign = 'left top';
+                ctx.font ='24px' + ' Arial';
+                ctx.fillText(_this.pictureInfo.nickname, userNameX, userNameY);
+                ctx.save()
+                ctx.font ='37px' + ' Arial';
+                ctx.fillText('【' + _this.pictureInfo.title + '】', titleX, titleY);
+                ctx.save()
+                avatar.setAttribute("crossOrigin",'Anonymous')
+                avatar.src = _this.pictureInfo.avatar
+                avatar.onload = function (params) {
+                    ctx.save(); // 保存当前ctx的状态
+                    // ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //画出圆
+                    // ctx.clip(); //裁剪上面的圆形
+                    ctx.drawImage(avatar, imgX,imgY,imgWidth, imgWidth)
+                    ctx.restore(); // 还原状
+                    ctx.save()
+                     _this.shareCode = canvas.toDataURL("image/png")
+                     _this.shareOnoff2 = true
+                    console.log('avatar.load')
+                }
                 img2.onload = function (param) {  
-                    ctx.drawImage(img2, 293,640,377, 377)
+                    var imgWidth = img2.height
+                    var imgHeight = img2.width
+                    var drawWidth = 644
+                    var drawHeight = 389
+                    var cx = 0
+                    var cy = 0
+                    var cw = 644
+                    var ch = 389
+                    // if(imgWidth>= drawWidth && imgHeight >= drawHeight) {
+                    //     cx = (imgWidth - drawWidth)/2
+                    //     cy = (imgHeight - drawHeight)/2
+                    //     console.log(1)
+                    // }
+                    // if(imgWidth< drawWidth && imgHeight >= drawHeight) {
+                    //     cx = 0
+                    //     cy = (imgHeight - imgHeight*imgWidth/drawWidth)/2
+                    //     cw = imgWidth
+                    //     ch = drawHeight*imgWidth/drawWidth
+                    //     console.log(2, cw/ch,drawWidth/drawHeight )
+                    // }
+                    if(imgWidth/imgHeight > drawWidth/drawHeight) {
+                            cx = (imgWidth - imgWidth*imgHeight/drawHeight)/2
+                            cy = 0
+                            cw = imgWidth*imgHeight/drawHeight
+                            ch = imgHeight
+                            console.log(3)
+                    } else {
+                            cx = 0
+                            cy = (imgHeight - imgHeight*imgWidth/drawWidth)/2
+                            cw = imgWidth
+                            ch = drawHeight*imgWidth/drawWidth
+                             console.log(4)
+                    }
+                    console.log(img2.height,img2.width, cx, cy, cw,ch)
+                    // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
+                    ctx.drawImage(img2,cx, cy,cw, ch,152,473,drawWidth,drawHeight)
                      _this.shareCode = canvas.toDataURL("image/png")
-                     Indicator.close()
+                     _this.shareOnoff2 = true
+                }
+                var img3 = new Image()
+                img3.setAttribute("crossOrigin",'Anonymous')
+                img3.src = imgUrl || require('../../static/upload.jpg')
+                img3.onload = function () {
+                    ctx.drawImage(img3,664,990,190,190)
+                    _this.shareCode = canvas.toDataURL("image/png")
                      _this.shareOnoff2 = true
                 }
                 Indicator.close()
@@ -439,6 +518,7 @@ export default {
                     
                     if (res.data.code === 0) {
                         this.pictureInfo = res.data.data;
+                        // this.getCanvasDrawImage()
                     } else {
                         setTimeout(() => {
                             this.kongtuLock = true;