canvas绘制图片，实现在微信里长按保存图片

 做的一个微信公众号，要实现用户长按保存获得到的卡片，并且卡片上的内容是抽奖抽取到的，是动态变化的。一开始选用的一个

html2canvas.js插件，在本地调试的很好开心啊，但是在手机上运行的时候转化成图片很模糊。。。，然后还是自己写一个吧

 

点击每个卡面展示详情，这个详情可以长按保存。选择钻石黄金等等，类型不一样，卡片背景、字体的颜色都不一样

代码部分

    var list = {
         662.4, // 卡牌宽度
        height: 1000.224, // 卡
        imgBG: "", // 卡牌背景
        num: '39', // 牌编号ID
        numStarColor: '#877E78', // 牌编号开始渐变色
        numEndColor: '#EAE5E3', // 牌编号结束渐变色
        lineColor: '#725F52', // 卡牌线条颜色
        txt: '爱一个人是不计较，但爱一个人时却又忍不住想要去计较。人就这么矛盾，其实就是看爱情和自我哪个重要。相爱其实并不难，难的是要和对的人相爱。', // 卡牌内容
        txtColor: '#55453A', // 卡牌内容字体颜色
        imgQr: '/img/regist/qr.png', // 卡牌底部二维码
        qrBgColor: '#725F52', // 二维码边框颜色
    };

画图代码

  function doMyCanvas(list) {
        // var c= document.getElementById('canvas');
        var c = document.createElement('canvas');
        var ctx = c.getContext("2d");

        c.width = list.width;
        c.height = list.height;
        var myCanvas = c;
        var img = new Image();
        img.src = list.imgBG;
        img.setAttribute("crossOrigin", 'Anonymous');
        img.onload = function() {
            ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

            ctx.font = "bold 72px cjg";
            var myFontColor = ctx.createLinearGradient(0, myCanvas.height * 0.15, 0, myCanvas.height * 0.25);
            myFontColor.addColorStop("0", list.numStarColor);
            myFontColor.addColorStop("0.3", list.numEndColor);
            myFontColor.addColorStop("1", list.numStarColor);

            ctx.fillStyle = myFontColor;
            ctx.textAlign = "center";
            ctx.fillText(list.num, myCanvas.width * 0.5, myCanvas.height * 0.25);

            var myFontColor2 = ctx.createLinearGradient(0, 0, myCanvas.width, 0);
            myFontColor2.addColorStop("0", "transparent");
            myFontColor2.addColorStop("0.5", list.lineColor);
            myFontColor2.addColorStop("1", "transparent");
            ctx.fillStyle = myFontColor2;
            ctx.fillRect(myCanvas.width * 0.1, myCanvas.height * 0.3, myCanvas.width * 0.8, 1);


            ctx.fillStyle = list.txtColor;
            ctx.textAlign = "center";
            ctx.font = "normal 32px cjg";
            var str = list.txt;
            var imgContent_initX = myCanvas.width * 0.5;
            // console.log(str.length);
            if (str.length < 15) {
                var imgContent_initY = myCanvas.height * 0.50;
            } else if (str.length < 30) {
                var imgContent_initY = myCanvas.height * 0.47;
            } else if (str.length < 45) {
                var imgContent_initY = myCanvas.height * 0.45;
            } else if (str.length < 60) {
                var imgContent_initY = myCanvas.height * 0.42;
            } else {
                var imgContent_initY = myCanvas.height * 0.40;
            }
            canvasTextAutoLine(str, c, imgContent_initX, imgContent_initY, 50, list.width);


            ctx.fillStyle = myFontColor2;
            ctx.fillRect(myCanvas.width * 0.1, myCanvas.height * 0.7, myCanvas.width * 0.8, 1);


            var imgQrBox_color = list.qrBgColor;
            var imgQrBox_radius = 10;
            var imgQrBox_width = myCanvas.width * 0.33;
            var imgQrBox_height = myCanvas.width * 0.33;
            var imgQrBox_initX = myCanvas.width * 0.335;
            var imgQrBox_initY = myCanvas.height * 0.73;
            fillRoundRect(c, imgQrBox_initX, imgQrBox_initY, imgQrBox_width, imgQrBox_height, imgQrBox_radius, imgQrBox_color);

            var imgQr = new Image();
            imgQr.src = list.imgQr + "?timeStamp=" + new Date();
            imgQr.setAttribute("crossOrigin", 'Anonymous');
            imgQr.onload = function() {
                var imgQr_width = myCanvas.width * 0.3;
                var imgQr_height = myCanvas.width * 0.3;
                var imgQr_initX = myCanvas.width * 0.35;
                var imgQr_initY = myCanvas.height * 0.74;
                ctx.drawImage(imgQr, imgQr_initX, imgQr_initY, imgQr_width, imgQr_height);
                imgUrl = c.toDataURL('image/jpeg', 1.0);
                $('#img').attr('src', imgUrl);

            };
        };
    }

卡片上字数比较多，所以要写一个换行的方法

    /*
    str:要绘制的字符串
    canvas:canvas对象
    initX:绘制字符串起始x坐标
    initY:绘制字符串起始y坐标
    lineHeight:字行高，自己定义个值即可
    */
    function canvasTextAutoLine(str, canvas, initX, initY, lineHeight, canvasWidth) {

        var ctx = canvas.getContext("2d");
        var lineWidth = 0;

        var lastSubStrIndex = 0;
        for (let i = 0; i < str.length; i++) {
            lineWidth += ctx.measureText(str[i]).width;
            if (lineWidth > canvasWidth * 0.7) { //减去initX,防止边界出现的问题
                ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
                initY += lineHeight;
                lineWidth = 0;
                lastSubStrIndex = i;
            }
            if (i == str.length - 1) {
                ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
            }
        }
    }

在绘制过程中遇到了跨域问题

设置允许跨域

setAttribute("crossOrigin", 'Anonymous');