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

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

# 微信 2024-05-05 02:15 0 198 来源：云博客

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

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 }