常规h5获得的canvas
// //var canvas = document.createElement("canvas"); //创建画布
// console.log(canvas);
// canvas.width = tLength * 15; //设置画布宽度,15为字体大小
// canvas.height = 22; //设置画布高度
// //var context = canvas.getContext("2d"); //获取绘图环
// context.textAlign = "center"; //设置居中
// context.fillStyle = 'rgba(255, 255, 255, 0)'; //设置画布颜色
// context.fillRect(0, 0, canvas.width, canvas.height); //绘制白色背景,rect为方形
// context.font = "blod 35px 宋体"; //加粗,字号,字体
// context.fillStyle = "#007AFF"; //设置黑色画笔
// context.fillText(text, canvas.width / 2, canvas.height / 2); //添加文字
// // console.log(canvas.toDataURL("image/jpeg")); //转换为jpg
// // console.log(canvas.toDataURL({
// // format: 'png',
// // quality: 1
// // })); //转换为png 当前需要的为png
uniapp的canvas
let tLength = text.length;
var ctx = uni.createCanvasContext('CanvasCon', this)
ctx.setFillStyle('rgba(255, 255, 255, 0)'); // 背景透明色
let canvaswidth = tLength * 30; //设置画布宽度,30为字体大小
let canvasheight = 22; //设置画布高度
console.log(canvaswidth,canvasheight);
ctx.fillRect(0, 0, canvaswidth, canvasheight) // fillRect(x,y,宽度,高度)
ctx.setTextAlign('center')//文字居中
console.log(text);
ctx.setFillStyle('#e31d1a') // 颜色
ctx.fillText(text, canvaswidth / 2, canvasheight / 2)//将文字写如入图片
ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
uni.canvasToTempFilePath({ // 保存canvas为图片
canvasId: 'CanvasCon',
quality: 1,
complete: function(res) {
// 在H5平台下,tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败,APP端正常输出临时路径
console.log(res)
that.chooseText(res.tempFilePath)
} ,
})
});
},
主要的坑就是uniapp下如果做的APP项目不能创建dom对象 原本方法在真机上会报错 一定要用下面的方式