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');
标签：canvas,微信,ctx,myCanvas,height,width,imgQr,var,图片 来源： https://www.cnblogs.com/lymvv/p/10972274.html