关于字符串（包含表情）通过canvas转图片的一些坑

关于字符串（包含表情）通过canvas转图片的一些坑

1. 文字转canvas的换行问题

/**
思路：
* 利用canvas的measureText方法，在绘制字符串的过程中实时测量字符串内容是否超出canvas宽度，
* 	超出则重新绘制一行字符串
*/
function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {var ctx = Context("2d");var lineWidth = 0;var canvasWidth = canvas.width;var lastSubStrIndex = 0;ctx.font="26px Georgia";for (let i = 0; i < strArr.length; i++) {lineWidth += asureText(strArr[i]).width;if (lineWidth + allowance > canvasWidth - initX) { //减去initX,防止边界出现的问题ctx.fillText(str.subString(lastSubStrIndex, i), initX, initY);initY += lineHeight;lineWidth = 0;lastSubStrIndex = i;}if (i == strArr.length - 1) {ctx.fillText(str.subString(lastSubStrIndex, i+1), initX, initY);}}DataURL();}
let str = 'ce sadgkai 成为武汉 isacks非说的饭卡爱是否 i啊i 公司的啊师傅阿斯顿发lksdfksdja';let canvasDom = document.querySelector('#box');let initX = 20;let initY = 20;let lineHeightVal = 32;let allowance = 20; //canvas 右边边框余量let txtImgData = canvasTextAutoLine(str, canvasDom, initX, initY, lineHeightVal)

2. 图片清晰度问题

/**
* 思路：
*  canvas按照实际容器的两倍大小绘制，或者实际容器设置为canvas的1/2，由于生成的canvas高度是动态的，所以这里采取第二种方式，设置实际容器为canvas的1/2
* 
* /
<!--* @Author: wds* @Date: 2021-12-31 10:53:23* @LastEditors: wds* @LastEditTime: 2021-12-31 13:58:15
-->
<!DOCTYPE<