小程序文字转图片canvas

小灰灰 2023-10-11 23:16 49阅读 0赞

添加canvas标签并隐藏canvas

import { pathToBase64, base64ToPath } from 'image-tools'

textImg(){
    				var _this = this;
    				let descTxt = uni.getStorageSync('descTxt');
    				if(descTxt.length == 0 || descTxt == ""){
    					return;
    				}
    				const ctx = wx.createCanvasContext('save-picture');
    				ctx.draw();
    				ctx.setFillStyle("#333") // 颜色
    				ctx.font = "24px 'Microsoft Yahei'" //字体
    				const text = descTxt;
    				const textX = 0
    				const textY = 23
    				const lineHeight = 23
    				const MAX_WIDTH = 360
    				var rowLength = this.drawText(ctx, text, textX, textY, lineHeight, MAX_WIDTH)
    				var canvasHeight = rowLength * lineHeight
    				// this.setData({
    				// 	canvasWidth: MAX_WIDTH,
    				// 	canvasHeight: canvasHeight
    				// });
    				// 这里绘图渲染完后回调中再加上延时，最后再生成图片
    				ctx.draw(true, function() {
    					setTimeout(() => {
    						// 保存文案图片
    						wx.canvasToTempFilePath({
    							x: 0,
    							y: 0,
    							width: MAX_WIDTH,
    							height: canvasHeight,
    							destWidth: MAX_WIDTH * 2,
    							destHeight: canvasHeight * 2,
    							canvasId: 'save-picture',
    							success: function (res) {
    								console.log('res.tempFilePath', res.tempFilePath)
    								pathToBase64(res.tempFilePath).then(data => {
    									_this.$store.commit('descTxt', data);
    								})
    							},
    							fail: function (err) {
    								console.log('err')
    							}
    						})
    					}, 300);
    				})
    			},
    			drawText: function (ctx, text, startX, startY, lineHeight, MAX_WIDTH) {
    				let lineArr = text.split("\n") // 拆分出内容本身的行
    				let rowArr = [] // 用来存储每一行的数据
    				for (let i = 0; i < lineArr.length; i++) { // 先遍历内容本身的换行
    					const lineStr = lineArr[i].split('')
    					var rowStrArr = [] // 每一行的文字数组
    					for (let j = 0; j < lineStr.length; j++) { // 再遍历每一行文字
    						const currentStr = lineStr[j]
    						rowStrArr.push(currentStr)
    						const rowStr = rowStrArr.join('')
    						// 判断当前文字宽度是否超出宽度，超出后换一行继续遍历
    						if (this.measureText(rowStr, 18) > MAX_WIDTH) { // 在微信小程序现在的版本(v2.13.2)中，小程序的canvas还不支持measureText，这个方法重写了一个
    							rowStrArr.pop() // 删除最后一个
    							rowArr.push(rowStrArr.join('')) // 完成一行
    							rowStrArr = [currentStr]
    							continue
    						}
    						// 最后一个字母 直接添加到一行
    						if (j === lineStr.length - 1) {
    							rowArr.push(rowStr) // 完成一行
    						}
    					}
    					rowArr.push('')
    				}
    				for (let i = 0; i < rowArr.length; i++) {
    					ctx.fillText(rowArr[i], startX, startY + i * lineHeight)
    				}
    				console.log('rowArr', rowArr)
    				return rowArr.length
    			},
    			measureText: function (text, fontSize=10) {
    				text = String(text);
    				var text = text.split('');
    				var width = 0;
    				text.forEach(function(item) {
    					if (/[a-zA-Z]/.test(item)) {
    						width += 7;
    					} else if (/[0-9]/.test(item)) {
    						width += 5.5;
    					} else if (/\./.test(item)) {
    						width += 2.7;
    					} else if (/-/.test(item)) {
    						width += 3.25;
    					} else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配
    						width += 10;
    					} else if (/||/.test(item)) {
    						width += 3.73;
    					} else if (/\s/.test(item)) {
    						width += 2.5;
    					} else if (/%/.test(item)) {
    						width += 8;
    					} else {
    						width += 10;
    					}
    				});
    				return width * fontSize / 10;
    			},