需要用canvas画图,导出图片,然后整了半天,才画出来,遇到了特么坑的是,官方给的demo都是报错的,文档上的示例代码不能用,这是官方的示例
<canvas type="2d" id="myCanvas"></canvas>
这是真正使用的
<canvas canvas-id="myCanvas" style="width:375px;height:667px;margin:0 auto;"></canvas>
官方并没有说明,而且给的示例用的都是id,导致花了很长时间才搞明白原因。
下面就开始画图了
mapping() {
let _this = this;
//背景图
let promiseBg = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'http://classimage.goouc.com/uploads/images/1/20200630/f71a2ddc91b43bdc372b29e503d56926.png',
success(res) {
console.log(res)
resolve(res);
}
})
})
//头像
let promiseHeader = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'http://classimage.goouc.com/uploads/images/1/20200702/0fb028c82c4f055ded6beb843373cb4e.jpg',
success(res) {
console.log(res)
resolve(res);
},
fail(err) {
console.log(err);
}
})
})
// 二维码
let promiseQr = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'http://classimage.goouc.com/uploads/images/1/20200704/edcfdfecaad8d6cddddbed130e262673.png',
success(res) {
console.log(res)
resolve(res);
},
fail(err) {
console.log(err);
}
})
})
Promise.all([promiseBg, promiseHeader, promiseQr]).then(res => {
const ctx = wx.createCanvasContext('myCanvas');
ctx.clearRect(0, 0, 375, 667);
// 背景
ctx.drawImage(res[0].path, 0, 0, 375, 667);
//标题 证书
ctx.setFontSize(27);
ctx.setFillStyle('#333')
ctx.setTextAlign('center');
ctx.font = 'normal bold 27px sans-serif';//对字体进行加粗
ctx.fillText('结课证书', 187.5, 148, 235);
//头像
ctx.save();//先对之前的内容进行保存
ctx.beginPath();
ctx.arc(187.5, 203, 30, 0, 2 * Math.PI);
ctx.clip();//截取这部分画的图形,下面的图像就填入了画好的图形内
//图片变形处理
_this.processingDeformation(ctx,res[1].path,res[1].width,res[1].height,60,60,157.5,173);
ctx.restore();//截取图形结束,恢复画布
//昵称
ctx.setFontSize(16);
ctx.setFillStyle('#333')
ctx.setTextAlign('center');
ctx.font = 'normal 500 16px sans-serif';
ctx.fillText('玲珑咖啡', 187.5, 258, 235);
//在考试中获得 分割字体
let examText = '考试考试考试考试考试考试'
let examTextArr = examText.split('');
let exam1 = '';
let exam2 = '';
for (let i = 0; i < examTextArr.length; i++) {
if (ctx.measureText(exam1).width < 126) {
exam1 += examTextArr[i];
} else {
exam2 = exam1 + '...';
}
}
ctx.setFontSize(14);
ctx.setFillStyle('#999')
ctx.setTextAlign('center');
ctx.font = 'normal 200 14px sans-serif';
ctx.fillText('在「' + exam2 + '」获得', 187.5, 294, 235);
//分数
ctx.setFontSize(60);
ctx.setFillStyle('#333')
ctx.setTextAlign('right');
ctx.font = 'normal 500 60px sans-serif';
ctx.fillText('90', 200, 380, 200);
//分 字
ctx.setFontSize(16);
ctx.setFillStyle('#333')
ctx.setTextAlign('left');
ctx.font = 'normal 500 16px sans-serif';
ctx.fillText('分', 216, 380);
//字体分割 评语
let fontText = '一分耕耘,一分收获,未必;九分耕耘,会有收获,一定!';
let fontTextArr = fontText.split('');
let text1 = '';
let text2 = '';
for (let i = 0; i < fontTextArr.length; i++) {
if (ctx.measureText(text1).width < 235) {
text1 += fontTextArr[i];
} else {
text2 += fontTextArr[i];
}
}
ctx.setFontSize(14);
ctx.setFillStyle('#333')
ctx.setTextAlign('center');
ctx.font = 'normal 400 14px sans-serif';
ctx.fillText(text1, 187.5, 420, 235);
ctx.fillText(text2, 187.5, 440, 235);
//二维码
ctx.save();
ctx.beginPath();
// ctx.fillRect(148, 479, 80,80);
// ctx.strokeRect(148, 479, 80, 80)
ctx.rect(148, 479, 80, 80)
ctx.clip();
//图片变形处理
_this.processingDeformation(ctx,res[2].path,res[2].width,res[2].height,80,80,148,479);
ctx.restore();
//在线学院
ctx.setFontSize(14);
ctx.setFillStyle('#333')
ctx.setTextAlign('center');
ctx.font = 'normal 500 14px sans-serif';
ctx.fillText('在线学院', 187.5, 594, 235);
//长按识别二维码关注
ctx.setFontSize(12);
ctx.setFillStyle('#999')
ctx.setTextAlign('center');
ctx.font = 'normal 200 12px sans-serif';
ctx.fillText('长按识别二维码关注', 187.5, 619, 235);
//结束
ctx.draw(false, function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 375,
height: 667,
destWidth: 3000,//像素点 越密集 导出图像越清晰
destHeight: 5336,
canvasId: 'myCanvas',
success(res) {
_this.setData({
imgurl: res.tempFilePath
})
console.log(res.tempFilePath)
}
})
});
})
},
/**
* 处理图片变形 以画好的图形短边为依据,把图片缩小到图形大小,然后对图片计算位置,以图形中心为中心进行定位,保证图片定位后正好在图形中间位置
* @param ctx 画布对象
* @param path 图片路径
* @param imgWidth 图片宽度
* @param imgHeight 图片高度
* @param containerWidth 容器宽度
* @param containerHeight 容器高度
* @param containerTop 容器上定位
* @param containerLeft 容器左定位
*/
processingDeformation(ctx,path, imgWidth, imgHeight, containerWidth, containerHeight, containerTop, containerLeft) {
let min = containerWidth >= containerHeight ? containerHeight : containerWidth;
if (imgWidth > imgHeight) {
let width = Math.floor(imgWidth / (imgHeight / min));
let height = min;
ctx.drawImage(path, containerTop - (Math.floor(width / 2) - Math.floor(containerWidth / 2)), containerLeft, width, height);
} else {
let width = min;
let height = Math.floor(imgHeight / (imgWidth / min));
ctx.drawImage(path, containerTop, containerLeft - (Math.floor(height / 2) - Math.floor(containerHeight / 2)), width, height);
}
},
//画好的图形保存到相册
downloadFile() {
console.log()
let _this = this;
wx.saveImageToPhotosAlbum({
filePath: _this.data.imgurl,
success(res) {
console.log('res', res);
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 3000
})
}
})
},
效果图如下
以上就是画布全部得内容,欢迎指正!