wx.createOffscreenCanvas创建离屏canvas，并授权保存图片到相册
// 保存图片到相册
async saveImage() {
// 创建离屏 2D canvas 实例
const canvas = wx.createOffscreenCanvas({
type: '2d',
width: 718,
height: 832
})
const context = canvas.getContext('2d')
// 创建一个图片
const image = canvas.createImage();
context.clearRect(0, 0, 718, 832)
// 等待图片加载
await new Promise(resolve => {
image.src = '/images/share-bg.png';
image.onload = resolve
})
context.drawImage(image, 0, 0, 718, 832);
let text1 = '识别或扫码，看看你能换多少？'
context.fillStyle = "#804431";
context.font = "42px Arial";
context.fontWeight = 'bold'
// context.textAlign = 'center'
getWarpText(context, text1, 64, 462, 640, 52, 1)
ffCanvas = canvas;
// 获取画完后的数据
const imgData = context.canvas.toDataURL('image/png');
// 获取用户相册授权
const _that = this;
wx.getSetting({
success(res) {
// 如果已授权
if (res.authSetting['scope.writePhotosAlbum']) {
_that.onSaveImage(imgData)
// 如果没有授权
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
// 调起用户授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
_that.onSaveImage(imgData)
},
fail() {
wx.showToast({
title: '您没有授权，无法保存到相册',
icon: 'none'
})
}
})
// 如果之前授权已拒绝
} else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
_that.onSaveImage(imgData)
} else {
wx.showToast({
title: '您没有授权，无法保存到相册',
icon: 'none'
})
}
}
})
}
}
})
},
// 生成图片
onSaveImage(imgData) {
const _this = this;
const fs = wx.getFileSystemManager();
const number = new Date().getTime();
const imgFilePath = wx.env.USER_DATA_PATH + '/' + number + '.png'
fs.writeFile({
filePath: imgFilePath, //设置下载图片的地址
data: imgData.slice(22), //slice(22)的目的是去掉data:image/png;base64
encoding: 'base64',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: imgFilePath, //设置下载图片的地址
success: (res) => {
wx.showToast({
title: '保存成功',
})
},
fail: () => {
wx.showToast({
title: '保存到相册失败',
})
}
})
}
})
},
文本换行，超出省略号显示
/**
* 计算多句换行文字
* @param: canvas canvas上下文对象
* @param: arrText 渲染文本数组
* @param y 渲染第一行y轴位置
* @param gap 文字之间的上下间隔
*/
function getWarpTextMulti(canvas, arrText, y, gap = 10) {
for (let index = 0; index < arrText.length; index++) {
const text = arrText[index];
let lineArr = getWarpText(canvas, text, MARGIN_LEFT, y, MAX_WIDTH, LINE_HEIGHT)
y += LINE_HEIGHT * lineArr.length + gap
}
}
/**
* 计算换行文字
* @param canvas canvas上下文对象
* @param text 渲染文本
* @param x 渲染x轴位置
* @param y 渲染第一行y轴位置
* @param maxWidth 最大宽度
* @param lineHeight 行高
* @param maxLine 最大行数 超出隐藏并显示省略号 不传入则代表不限制
*/
function getWarpText(canvas, text, x, y, maxWidth, lineHeight, maxLine) {
// 对入参的类型进行检测
if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number' || typeof lineHeight != 'number') {
throw new Error("参数传入出错")
}
//如果最大宽度未定义 默认为canvas宽度
if (typeof maxWidth == 'undefined') {
maxWidth = (canvas && canvas.width);
}
if (typeof lineHeight == 'undefined') {
lineHeight = (canvas.canvas && parseInt(window.getComputedStyle(canvas.canvas).lineHeight)) ||
parseInt(window.getComputedStyle(document.body).lineHeight)
}
let arrText = text.split('');
let line = '';
let lines = [];
let lastLine = ""
let ellipsis = canvas.measureText("...");
let ellipsisWidth = ellipsis.width;
for (let n = 0; n < arrText.length; n++) {
//每个循环累加字符
let testLine = line + arrText[n];
//检测累加字符 获取累加字符的高度和宽度
let metrics = canvas.measureText(testLine);
let testWidth = metrics.width;
let lineWidth = canvas.measureText(line).width;
// 如果当前添加行是最后一行 则替换最后一个字符为"..." 判断长度是否需要删去最后一个字符
if (maxLine && maxLine - 1 === lines.length && ((lineWidth + ellipsisWidth) > maxWidth)) {
line = line.slice(0, line.length - 1) + "...";
testWidth = lineWidth + ellipsisWidth;
}
//如果累加字符的宽度大于定义的绘制文本最大宽度 则绘制累加字符的文本 并且设置换行间距再次进行绘制
if (testWidth > maxWidth && n > 0) {
lastLine = line;
lines.push({
text: line,
x: x,
y: y
})
if (maxLine && maxLine <= lines.length) {
break
}
line = arrText[n];
y += lineHeight;
} else {
line = testLine;
}
}
if (lastLine !== line) {
lines.push({
text: line,
x: x,
y: y
})
}
for (let i = 0; i < lines.length; i++) {
const item = lines[i];
canvas.fillText(item.text, item.x, item.y);
}
return lines;
}
/**
* 绘制圆角矩形
* @param ctx canvas上下文对象
* @param x 渲染x轴位置
* @param y 渲染第一行y轴位置
* @param width 宽度
* @param height 高
* @param radius
* @param color 颜色
* */
function roundedRect(ctx, x, y, width, height, radius, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius); // 右上圆角
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); // 右下圆角
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius); // 左下圆角
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y); // 左上圆角
ctx.stroke();
}
