wxml
<canvas canvas-id="shareFrends" class="canvas"></canvas>wxss
.canvas {
width: 660rpx;
height: 960rpx;
width:364px;
height:529px;
position: fixed;
top: -450%;
left: 50%;
z-index: -1;
transform: translate(-50%,-53%);
background-color: #FFFFFF;
border-radius: 10rpx;
/* 这里注意canvas容器不能写隐藏 否则真机调试会出现无法渲染的情况。 */
/* //display: none; */
}
wxjs
Page({
flexTeacherClick: function (e) {
this.setData({
hideflexalert: !this.data.hideflexalert
});
},
flexTeacherClickCanvas: function (e) {
this.setData({
hideflexalertcanvas:true
});
this.saveImg();
},
copyBtn: function (e) {
var that = this;
wx.setClipboardData({
//准备复制的数据
data: that.data.wechatnum,
success: function (res) {
wx.showToast({
title: '复制成功',
});
}
});
},
shareFriends: function () {
var that = this;
wx.showLoading({
title: '图片生成中',
});
that.creatImg();
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'shareFrends',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
hideflexalertcanvas: false
});
wx.hideLoading();
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
creatImg: function () {
var that = this;
var detail = this.data.hbdetail;
var ctx = wx.createCanvasContext('shareFrends');
ctx.setFillStyle('#FFFFFF');
ctx.fillRect(0, 0, 660, 960);
//ctx.draw();
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var time = year + '-' + month + '-' + day; // 绘图的时间
var name = detail.hbtitle; //绘图的标题 需要处理换行
var pichName = detail.hbname; //用户昵称
var title = detail.hbtitle; //标题
var desc = detail.hbdesc; //描述
var price = detail.hbprice; //价格
if (pichName.length > 16) { //用户昵称显示一行 截取
pichName = pichName.slice(0, 9) + '...';
}
// ctx.setFillStyle("#000000");
// ctx.setStrokeStyle("#00ff00");
// ctx.save();
//绘制头部背景
ctx.setFillStyle('#eeeeee');
ctx.fillRect(0, 0, 660, 60);
ctx.save();
ctx.beginPath(); //开始绘制
//绘制头像
ctx.arc(35 / 2 + 15, 35 / 2 + 14, 35 / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(detail.hbimg, 15, 14, 35, 35);
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
//绘制名字
ctx.setFontSize(14);
var pichNameW = ctx.measureText(pichName).width;//测量并返回文本宽度
ctx.setFillStyle('#323232');
ctx.fillText(pichName, 60, 28, pichNameW + 10);
// ctx.draw();
//绘制时间
ctx.setFontSize(12);
time = time + ' 发布了一个拼团';
var metrics = ctx.measureText(time).width;//测量并返回文本宽度
ctx.setFillStyle('#969696');
ctx.fillText(time, 60, 45, metrics + 10);
//绘制标题
ctx.setFontSize(17);
var titleW = ctx.measureText(title).width;//测量并返回文本宽度
ctx.setFillStyle('#323232');
ctx.fillText(title, 15, 96, titleW + 10);
//绘制描述
ctx.setFontSize(13);
var descW = ctx.measureText(desc).width;//测量并返回文本宽度
ctx.setFillStyle('#646464');
that.wordsWrap(ctx, desc, descW, 320, 15, 120, 24);
// ctx.fillText(desc, 15, 120, descW + 10);
// 绘制宣传图
ctx.drawImage(detail.hbimg, 15, 190, 334, 210);
//绘制价格
ctx.setFontSize(20);
var priceW = ctx.measureText(price).width;//测量并返回文本宽度
ctx.setFillStyle('#FF4642');
ctx.fillText(price, 15, 474, priceW + 10);
//绘制宣传文本
var xctext1 = '一群人赶来拼团';
ctx.setFontSize(12);
var xctextW1 = ctx.measureText(xctext1).width;//测量并返回文本宽度
ctx.setFillStyle('#969696');
//that.wordsWrap(ctx, xctext, xctextW, 84, 170, 464,16);
ctx.fillText(xctext1, 170, 460, xctextW1 + 10);
var xctext2 = '扫码参与';
ctx.setFontSize(12);
var xctextW2 = ctx.measureText(xctext2).width;//测量并返回文本宽度
ctx.setFillStyle('#969696');
//that.wordsWrap(ctx, xctext, xctextW, 84, 170, 464,16);
ctx.fillText(xctext2, 205, 478, xctextW2 + 10);
//绘制二维码
ctx.drawImage(detail.hbimg, 264, 422, 84, 84);
ctx.draw();
},
// canvas 标题超出换行处理
wordsWrap: function (ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
var lineWidth = 0;
var lastSubStrIndex = 0;
for (var i = 0; i < name.length; i++) {
lineWidth += ctx.measureText(name[i]).width;
if (lineWidth > maxWidth) {
ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
srartY += wordsHight;
lineWidth = 0;
lastSubStrIndex = i;
}
if (i == name.length - 1) {
ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
}
}
},
saveImg:function() {
var that = this;
// 获取用户是否开启用户授权相册
wx.getSetting({
success(res) {
// 如果没有则获取授权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success() {
wx.showToast({
title: '保存成功'
});
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
});
}
});
},
fail() {
// 如果用户拒绝过或没有授权，则再次打开授权窗口
//（ps：微信api又改了现在只能通过button才能打开授权设置，以前通过openSet就可打开，下面有打开授权的button弹窗代码）
that.setData({
openSet: true
});
}
});
} else {
// 有则直接保存
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success() {
wx.showToast({
title: '保存成功'
});
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
});
}
});
}
}
});
},
});
参考文档:
https://www.cnblogs.com/zzgyq/p/8882995.html
https://www.jianshu.com/p/5f96a4f91b9c
https://www.jianshu.com/p/8695f78c27ff
Comments | NOTHING