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

Posted 2021-12-19 lymvv

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

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

 

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

代码部分

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

画图代码

 1   function doMyCanvas(list) 
 2         // var c= document.getElementById(‘canvas‘);
 3         var c = document.createElement(‘canvas‘);
 4         var ctx = c.getContext("2d");
 5 
 6         c.width = list.width;
 7         c.height = list.height;
 8         var myCanvas = c;
 9         var img = new Image();
10         img.src = list.imgBG;
11         img.setAttribute("crossOrigin", ‘Anonymous‘);
12         img.onload = function() 
13             ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
14 
15             ctx.font = "bold 72px cjg";
16             var myFontColor = ctx.createLinearGradient(0, myCanvas.height * 0.15, 0, myCanvas.height * 0.25);
17             myFontColor.addColorStop("0", list.numStarColor);
18             myFontColor.addColorStop("0.3", list.numEndColor);
19             myFontColor.addColorStop("1", list.numStarColor);
20 
21             ctx.fillStyle = myFontColor;
22             ctx.textAlign = "center";
23             ctx.fillText(list.num, myCanvas.width * 0.5, myCanvas.height * 0.25);
24 
25             var myFontColor2 = ctx.createLinearGradient(0, 0, myCanvas.width, 0);
26             myFontColor2.addColorStop("0", "transparent");
27             myFontColor2.addColorStop("0.5", list.lineColor);
28             myFontColor2.addColorStop("1", "transparent");
29             ctx.fillStyle = myFontColor2;
30             ctx.fillRect(myCanvas.width * 0.1, myCanvas.height * 0.3, myCanvas.width * 0.8, 1);
31 
32 
33             ctx.fillStyle = list.txtColor;
34             ctx.textAlign = "center";
35             ctx.font = "normal 32px cjg";
36             var str = list.txt;
37             var imgContent_initX = myCanvas.width * 0.5;
38             // console.log(str.length);
39             if (str.length < 15) 
40                 var imgContent_initY = myCanvas.height * 0.50;
41              else if (str.length < 30) 
42                 var imgContent_initY = myCanvas.height * 0.47;
43              else if (str.length < 45) 
44                 var imgContent_initY = myCanvas.height * 0.45;
45              else if (str.length < 60) 
46                 var imgContent_initY = myCanvas.height * 0.42;
47              else 
48                 var imgContent_initY = myCanvas.height * 0.40;
49             
50             canvasTextAutoLine(str, c, imgContent_initX, imgContent_initY, 50, list.width);
51 
52 
53             ctx.fillStyle = myFontColor2;
54             ctx.fillRect(myCanvas.width * 0.1, myCanvas.height * 0.7, myCanvas.width * 0.8, 1);
55 
56 
57             var imgQrBox_color = list.qrBgColor;
58             var imgQrBox_radius = 10;
59             var imgQrBox_width = myCanvas.width * 0.33;
60             var imgQrBox_height = myCanvas.width * 0.33;
61             var imgQrBox_initX = myCanvas.width * 0.335;
62             var imgQrBox_initY = myCanvas.height * 0.73;
63             fillRoundRect(c, imgQrBox_initX, imgQrBox_initY, imgQrBox_width, imgQrBox_height, imgQrBox_radius, imgQrBox_color);
64 
65             var imgQr = new Image();
66             imgQr.src = list.imgQr + "?timeStamp=" + new Date();
67             imgQr.setAttribute("crossOrigin", ‘Anonymous‘);
68             imgQr.onload = function() 
69                 var imgQr_width = myCanvas.width * 0.3;
70                 var imgQr_height = myCanvas.width * 0.3;
71                 var imgQr_initX = myCanvas.width * 0.35;
72                 var imgQr_initY = myCanvas.height * 0.74;
73                 ctx.drawImage(imgQr, imgQr_initX, imgQr_initY, imgQr_width, imgQr_height);
74                 imgUrl = c.toDataURL(‘image/jpeg‘, 1.0);
75                 $(‘#img‘).attr(‘src‘, imgUrl);
76 
77             ;
78         ;
79     

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

 1     /*
 2     str:要绘制的字符串
 3     canvas:canvas对象
 4     initX:绘制字符串起始x坐标
 5     initY:绘制字符串起始y坐标
 6     lineHeight:字行高，自己定义个值即可
 7     */
 8     function canvasTextAutoLine(str, canvas, initX, initY, lineHeight, canvasWidth) 
 9 
10         var ctx = canvas.getContext("2d");
11         var lineWidth = 0;
12 
13         var lastSubStrIndex = 0;
14         for (let i = 0; i < str.length; i++) 
15             lineWidth += ctx.measureText(str[i]).width;
16             if (lineWidth > canvasWidth * 0.7)  //减去initX,防止边界出现的问题
17                 ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
18                 initY += lineHeight;
19                 lineWidth = 0;
20                 lastSubStrIndex = i;
21             
22             if (i == str.length - 1) 
23                 ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
24             
25         
26     

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

设置允许跨域

setAttribute("crossOrigin", ‘Anonymous‘);