微信小程序 canvas 自动适配 自动换行，保存图片分享到朋友圈 https://github.com/richard1015/News
微信IDE演示代码https://developers.weixin.qq.com/s/WCkpsTm97M7p
function findBreakPoint(text, width, context) {
var min = 0;
var max = text.length - 1;
while (min <= max) {
var middle = Math.floor((min + max) / 2);
var middleWidth = context.measureText(text.substr(0, middle)).width;
var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
return middle;
}
if (middleWidth < width) {
min = middle + 1;
} else {
max = middle - 1;
}
}
return -1;
}
function breakLinesForCanvas(context, text, width, font) {
var result = [];
if (font) {
context.font = font;
}
var textArray = text.split('\r\n');
for (let i = 0; i < textArray.length; i++) {
let item = textArray[i];
var breakPoint = 0;
while ((breakPoint = findBreakPoint(item, width, context)) !== -1) {
result.push(item.substr(0, breakPoint));
item = item.substr(breakPoint);
}
if (item) {
result.push(item);
}
}
return result;
}
Page({
/**
* 页面的初始数据
*/
data: {
id: 0,
info: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#010101',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
console.log(options)
let id = options.id;
let info ={
"title":"asdasd啊啊啊asdasd啊啊啊asdasd啊啊啊asdasd啊啊啊asdasd啊啊啊"，
"intro":"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"
};
self.setData({
info
});
self.drawInit(info);
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) { },
/**
* 绘制图片
*/
drawInit: function (info) {
var contentTitle = info.title;
var contentStr = info.intro;
var that = this
var res = wx.getSystemInfoSync();
var canvasWidth = res.windowWidth;
// 获取canvas的的宽 自适应宽（设备宽/750) px
var Rpx = (canvasWidth / 375).toFixed(2);
//画布高度 -底部按钮高度
var canvasHeight = res.windowHeight - Rpx * 59;
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('secondCanvas')
//设置行高
var lineHeight = Rpx * 30;
//左边距
var paddingLeft = Rpx * 20;
//右边距
var paddingRight = Rpx * 20;
//当前行高
var currentLineHeight = Rpx * 20;
//背景颜色默认填充
context.fillStyle = "#f8f8f8";
context.fillRect(0, 0, canvasWidth + Rpx * 2, canvasHeight);
//标题内容颜色默认
context.fillStyle = "#fff";
//高度减去 图片高度
context.fillRect(Rpx * 15, Rpx * 15, canvasWidth - Rpx * 30, canvasHeight);
//设置标题
var resultTitle = breakLinesForCanvas(context, contentTitle, canvasWidth - paddingLeft - paddingRight, `${(Rpx * 20).toFixed(0)}px PingFangSC-Regular`);
//字体颜色
context.fillStyle = '#000000';
resultTitle.forEach(function (line, index) {
currentLineHeight += Rpx * 30;
context.fillText(line, paddingLeft, currentLineHeight);
});
//画分割线
currentLineHeight += Rpx * 15;
context.setLineDash([Rpx * 6, Rpx * 3.75]);
context.moveTo(paddingLeft, currentLineHeight);
context.lineTo(canvasWidth - paddingRight, currentLineHeight);
context.strokeStyle = '#cccccc';
context.stroke();
//设置内容
var result = breakLinesForCanvas(context, contentStr || '无内容', canvasWidth - paddingLeft - paddingRight, `${(Rpx * 16).toFixed(0)}px PingFangSC-Regular`);
console.log(result);
//字体颜色
context.fillStyle = '#666666';
result.forEach(function (line, index) {
currentLineHeight += Rpx * 30;
context.fillText(line, paddingLeft, currentLineHeight);
}
context.draw();
},
saveImg: function () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'secondCanvas',
fileType: 'jpg',
success: function (res) {
console.log(res.tempFilePath) // 返回图片路径
wx.showLoading({
title: '保存中...',
mask: true
});
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
}, fail: function (res) {
wx.hideLoading()
console.log(res)
}
})
}
})
}
})
