添加canvas标签并隐藏canvas
<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;
},