canvas繪製圖片，實如今微信里長按保存圖片

 作的一個微信公衆號，要實現用戶長按保存得到到的卡片，而且卡片上的內容是抽獎抽取到的，是動態變化的。一開始選用的一個

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');