效果:
简介最多显示3行,超过3行部分用省略号(…)代替。
代码:
<canvas style="width: 100%; height: 409px;" canvas-id="myCanvas"></canvas>
// 绘制图片
createImg (qrcode) {
uni.showLoading({
title: '生成中'
})
const that = this;
const ctx = uni.createCanvasContext('myCanvas');
uni.getImageInfo({
src: 'http://www.test.com/demo.jpg', // 上半部分的图片地址
success(info) {
// 绘制图片, 原理:始终保持宽高比为1.3 : 1, 可以根据自己的情况调
let draw_height = 225;
if (info.height < info.width) {
let width = info.width;
ctx.drawImage(info.path, 0, 0, width, info.height, 0, 0, 293, draw_height);
} else {
let view_height = parseInt(info.width / 1.3); // 计算出可视区域的图片高度
let height = info.height;
if (info.height > draw_height) {
height = parseInt((info.height - view_height) / 2); // 计算出图片绘制的y方向起点
}
ctx.drawImage(info.path, 0, height, info.width, view_height, 0, 0, 293, draw_height);
}
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, draw_height, 293, 150);
// 绘制标题
ctx.setFillStyle('#333333');
ctx.setFontSize(13);
//标题加粗
ctx.fillText('标题', 19.5, 250);
ctx.fillText('标题', 20, 249.5);
// 绘制描述
ctx.setFillStyle('#777777');
// 绘制简介,超过3行用省略号(...)代替
that.toFormateStr(ctx, that.circleDetail.content, 260, 3, 20, 275, 20);
// 绘制底部矩形
ctx.setFillStyle('#f5f5f5');
ctx.fillRect(0, 338, 293, 71);
// 绘制底部信息提示
ctx.setFontSize(11.5);
ctx.setFillStyle('#777777');
ctx.fillText('达人SHOW-互动式社群新零售', 20, 368);
ctx.fillText('扫码查看更多内容', 20, 392);
// 绘制二维码
ctx.setFillStyle('#ffffff');
ctx.fillRect(220, 345, 56, 56);
// qrcode:二维码url地址
ctx.drawImage(qrcode, 224, 349, 48, 48);
ctx.draw(true);
uni.hideLoading();
}
})
}
/**
* 绘制换行文字
* @param ctx: canvas绘图上下文
* @param str: 需要绘制的文本内容
* @param draw_width: 绘制的文字宽度
* @param lineNum: 最多行数,比如最多显示(lineNum)3行,多出部分用'...'表示
* @param startX: 绘制文字的起点 X 轴坐标
* @param startY: 绘制文字的起点 Y 轴坐标
* @param steps: 每一行文字之间的间隔
* */
toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {
// 测量文本源尺寸信息(宽度)
var strWidth = ctx.measureText(str).width;
var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;
// 计算文本源一共能生成多少行
var liner = Math.ceil(sreLN);
// 等比缩放,计算一行文本显示多少个字符
let strlen = parseInt(str.length / sreLN);
// 若文本不足一行,则直接绘制,反之大于传入的最多行数(lineNum)以省略号(...)代替
if (strWidth < draw_width) {
ctx.fillText(str, startX, startpoint);
} else {
for (var i = 1; i < liner + 1; i++) {
let startPoint = strlen * (i-1);
if (i < lineNum || lineNum == -1) {
keyStr = str.substr(startPoint, strlen);
ctx.fillText(keyStr, startX, startpoint);
} else {
keyStr = str.substr(startPoint, strlen-5) + '...';
ctx.fillText(keyStr, startX, startpoint);
break;
}
startpoint = startpoint + steps;
}
}
}
保存到相册(canvas绘制的图):
saveImg () {
uni.showLoading({
title: '正在下载'
})
const baseW = 293, baseH = 409;
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: baseW * 2,
height: baseH * 2,
destWidth: baseW * 2,
destHeight: baseH * 2,
quality: 1,
canvasId: 'myCanvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
uni.hideLoading();
uni.showToast({
title: '已保存至相册!',
icon: 'success',
duration: 2000
});
}
})
}
})
}
很多方法都是直接用的uniapp官方API,盘就完了!