小さなプログラムのテキストを画像キャンバスに表示

キャンバスタグを追加してキャンバスを非表示にする

<view style="position: fixed;z-index: -3;width: 100%;height: 100%;left: 0;top: 0;background-color: #efefef;"></view>
<canvas canvas-id="save-picture" id="save-picture" :disable-scroll="true" style='width:360px;height:360px;position: fixed;z-index: -5; padding: 2%;'></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;
			},