vue h5 手机端 canvas 先后画多张图，并保存图片到本地相册

        

            

                 
                
长按保存图片
                

                   
                    
                    
                
            
        

drawCanvas(){
            var screenWidth = document.body.scrollWidth;//获取屏幕宽度
            let ratio = this.ratio  = screenWidth / 750;
            console.log('ratio',ratio);
            var canvas = document.getElementById('canvasToSave');
            var ctx = canvas.getContext('2d');
            //此处是为了实现 多行文本超过一定宽度自动换行
            CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
                if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
                    return;
                }
                var context = this;
                var canvas = context.canvas;
                
                if (typeof maxWidth == 'undefined') {
                    maxWidth = (canvas && canvas.width) || 300;
                }
                if (typeof lineHeight == 'undefined') {
                    lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
                }
                // 字符分隔为数组
                var arrText = text.split('');
                var line = '';
                for (var n = 0; n < arrText.length; n++) {
                    var testLine = line + arrText[n];
                    var metrics = context.measureText(testLine);
                    var testWidth = metrics.width;
                    if (testWidth > maxWidth && n > 0) {
                        context.fillText(line, x, y);
                        line = arrText[n];
                        y += lineHeight;
                    } else {
                        line = testLine;
                    }
                }
                context.fillText(line, x, y);
            };
            ctx.scale(2,2); //结合html 中 已设置的width、height， 解决canvas 画图不清晰问题
            this.canvasWidth =526  * ratio;
            this.canvasHeight = 934* ratio;
            this.canvasBorderRadius = 15*ratio;
            //底图
            let cardBgUrl =  this.drawCanvasData.greetCardImageUrl;
            let cardBgImg = new Image();
            let that = this;
            cardBgImg.onload = function(){
                that._drawCircularBeadImage(ctx,
                    cardBgImg,
                    0,
                    0,
                    264,
                    467,
                    that.canvasBorderRadius);
                let cardImgX = 76 * that.ratio;
                let cardImgY = 578 * that.ratio;
                let cardWidth = 83 * that.ratio;
                let cardBorderRadius = 6 * that.ratio;
                let cardImgUrl = that.drawCanvasData.cardImageUrl;
                let  cardImg = new Image();
                cardImg.onload = function(){
                    that._drawCircularBeadImage(ctx,
                        // cardImg,
                        // cardImgX,
                        // cardImgY,
                        // cardWidth,
                        // cardWidth,
                        // cardBorderRadius);
                        cardImg,
                        40,
                        270,
                        50,
                        50,
                        cardBorderRadius)
                }
                cardImg.crossOrigin="anonymous"; //设置这个表示图片允许跨域
                cardImg.src=cardImgUrl;
                let companyLogoUrl = that.drawCanvasData.enterpriseImageUrl;
                let originalRatio = that.drawCanvasData.enterpriseImageRatio;
                let companyLogoX;
                let companyLogoY;
                let companyLogoWidth;
                let companyLogoHeight;
                if (originalRatio > (58 / 133)) {
                    companyLogoWidth = 58 * that.ratio / originalRatio;
                    companyLogoHeight = 58 * that.ratio;
                    companyLogoX = 324 * that.ratio + (133 * that.ratio >> 1) - (companyLogoWidth >> 1);
                    companyLogoY = 452 * that.ratio;
                } else {
                    companyLogoWidth = 133 * that.ratio;
                    companyLogoHeight = 133 * that.ratio * originalRatio;
                    companyLogoX = 324 * that.ratio;
                    companyLogoY = 452 * that.ratio + (58 * that.ratio >> 1) - (companyLogoHeight >> 1);
                }
                let companyImg = new Image();
                companyImg.onload = function(){
                    ctx.drawImage(companyImg,
                        // companyLogoX,
                        // companyLogoY,
                        // companyLogoWidth,
                        // companyLogoHeight
                        170,
                        230,
                        60,
                        30,
                    );
                }
                companyImg.crossOrigin="anonymous";
                companyImg.src=companyLogoUrl;
            }
            cardBgImg.crossOrigin="anonymous"; //不设置 会报  Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
            cardBgImg.src=cardBgUrl;
            //此处加了个延时器，避免图片最后画上，把文字盖住
            //画文字
            setTimeout(() => {
        　　　　 let honor = '亲爱的' + this.drawCanvasData.employeeName+":";
                ctx.fillStyle = '#333333';
                ctx.font = '13px serif';
                ctx.fillText(honor, 50, 130);
                let desc = this.drawCanvasData.greetDescText;
                ctx.fillStyle = '#666666';
                ctx.font = '10px serif';
                ctx.wrapText(desc,50,150,180,20);
                let cardName = this.drawCanvasData.cardName;
                ctx.fillStyle = '#666666';
                ctx.font = '10px serif';
                ctx.fillText(cardName, 100, 300);
                this.canvas2Img = canvas.toDataURL('image/png',1); //canvas 画完之后就把canvas 隐藏，并把图片路径赋值给页面中的img
                this.firstClick = false; //避免canvas 多次绘画，图片会发生变化
                canvas.style.display = 'none';
                var imgShow = document.getElementById('imgShow');
　　　　　　      imgShow.setAttribute('src', this.canvas2Img);
            }, 300);
            //正文
            let desc = this.drawCanvasData.greetDescText;
            //卡名称
            let cardName = this.drawCanvasData.cardName;
            let centerLine = 619 * this.ratio; // 卡头像中线位置
            ctx.save();
        }
        //晒幸福
        shareGreetingCard() {
            if(this.firstClick){
                _this.drawCanvas(); 
            }else{
                this.showPop = true;
            }
        },