生成图片修改

src/components/Detail.vue

@@ -353,6 +353,13 @@ export default {
             });
         },
         getCanvasDrawImage(imgUrl) {
+            function createCanvasImg(name) {
+                    var imgUrl = '../../static/' + name + '.png'
+                    var myImg = new Image()
+                    myImg.setAttribute("crossOrigin",'Anonymous')
+                    console.log(imgUrl)
+                    return myImg
+            }
            try {
             var _this = this
             var canvas = document.createElement('canvas')
@@ -362,29 +369,86 @@ export default {
             var ctx=canvas.getContext("2d")
             var img = new Image()
             
-           console.log(this.pictureInfo.avatar)
-            img.src = require('../../static/shareBg2.png')
-            
-            img.onload = function (params) {
-                var img2 = new Image()
-                img2.setAttribute("crossOrigin",'Anonymous')
+            console.log(this.pictureInfo.avatar)
+            // img.src = require('../../static/shareBg2.png')
+            var poster = new Image()
+            poster.setAttribute("crossOrigin",'Anonymous')
+            poster.src = _this.pictureInfo.image
+            poster.onload = function (params) {
+                var imgHeight = poster.height;
+                var imgWidth = poster.width;
+                var drawImgHeight = imgHeight * 655/poster.width
+                var drawImgWidth = 655
+                canvas.height = 1038 +  drawImgHeight + ''
+                ctx.fillStyle = '#ffffff'
+                ctx.fillRect(0,15,960,canvas.height)
+                ctx.drawImage(poster, 152, 467, drawImgWidth, drawImgHeight);
+                var shareTitle = new Image();
+                shareTitle.src = require('../../static/shareTitle.png')
+                shareTitle.onload = function(){
+                    ctx.drawImage(shareTitle, 0,0,960, 372)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+                var shareText = new Image();
+                shareText.setAttribute("crossOrigin",'Anonymous')
+                // img2.src = imgUrl || require('../../static/upload.jpg')
+                shareText.src = require('../../static/shareText.png')
+                shareText.onload = function(){
+                    ctx.drawImage(shareText, 229,canvas.height - 495,507, 100)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+                var sao = new Image();
+                sao.setAttribute("crossOrigin",'Anonymous')
+                // img2.src = imgUrl || require('../../static/upload.jpg')
+                sao.src = require('../../static/sao.png')
+                sao.onload = function(){
+                    ctx.drawImage(sao, 684,canvas.height - 123)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+                var top = new Image();
+                top.setAttribute("crossOrigin",'Anonymous')
+                // img2.src = imgUrl || require('../../static/upload.jpg')
+                top.src = require('../../static/top.png')
+                top.onload = function(){
+                    ctx.drawImage(top, 97,431)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+                var right = new Image();
+                right.setAttribute("crossOrigin",'Anonymous')
+                // img2.src = imgUrl || require('../../static/upload.jpg')
+                right.src = require('../../static/right.png')
+                right.onload = function(){
+                    ctx.drawImage(right, 598,431)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+               
+                var bottom = new Image();
+                bottom.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()
+                bottom.src = require('../../static/bottom.png')
+                bottom.onload = function(){
+                    ctx.drawImage(bottom, 598, canvas.height - 698)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+                 var left = new Image();
+                left.setAttribute("crossOrigin",'Anonymous')
+                // img2.src = imgUrl || require('../../static/upload.jpg')
+                left.src = require('../../static/left.png')
+                left.onload = function(){
+                    ctx.drawImage(left, 97, canvas.height - 698)
+                    _this.shareCode = canvas.toDataURL("image/png")
+                }
+                var avatar = new Image() 
                 var circleR = 32.5 ;//半径
                 var circleX = 144;//圆心X坐标
-                var circleY = 1160 ;//圆心Y坐标
+                var circleY = canvas.height -159.5;//圆心Y坐标
                 var imgX = circleX - circleR;//图片X开始坐标
                 var imgY = circleY - circleR;//图片Y开始坐标
                 var imgWidth = 2 * circleR;//图片按圆形大小
                 var userNameX = 212
-                var userNameY = 1170
+                var userNameY = canvas.height -159.5
                 var titleX = 90
-                var titleY = 1083
+                var titleY = canvas.height - 229
                 ctx.fillStyle = "#0b5bab";
                 ctx.textAlign = 'left top';
                 ctx.font ='24px' + ' Arial';
@@ -406,55 +470,19 @@ export default {
                      _this.shareOnoff2 = true
                     console.log('avatar.load')
                 }
-                img2.onload = function (param) {  
-                    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")
-                     _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)
+                    ctx.drawImage(img3,664,canvas.height -337,190,190)
                     _this.shareCode = canvas.toDataURL("image/png")
-                     _this.shareOnoff2 = true
+
                 }
-                Indicator.close()
+                setTimeout(() => {
+                    Indicator.close()
+                }, 1500)
+                
                 // document.body.appendChild(canvas)
             }
            } catch(err) {
@@ -518,7 +546,7 @@ export default {
                     
                     if (res.data.code === 0) {
                         this.pictureInfo = res.data.data;
-                        // this.getCanvasDrawImage()
+                        this.getCanvasDrawImage()
                     } else {
                         setTimeout(() => {
                             this.kongtuLock = true;
@@ -815,7 +843,7 @@ export default {
             width: 500px;
             margin: 0 auto;
             display: block;
-            margin-top: 20vh;
+            margin-top: 15vh;
         }
         .share-tips {
             width: 500px;