canvas生成海报图、分享
首先话不多说元素样式走起来
canvas宽高由js变量动态定义
html
<canvas class=‘canvas’ canvas-id=“shareCanvas” style=“width:{{canvasWidth}}px;height:{{canvasHeight}}px”></canvas>
css
.canvas{
margin: 0 auto;
letter-spacing: 2rpx; //画布上文字间距 我实在不知道canvas api怎么控制字间距
margin-top: 10%;
}
然后绘制canvas代码
canvasImg：function（）{
[代码]var that = this;
wx.showLoading({
title: '图片正在生成'
});
//拿到用户名称和用户头像 name ，img
var name = app.header.userInfo.nickName;
var img = app.header.userInfo.avatarUrl.replace("http:", "https:");
//请求后台接口拿到小程序码临时url
//这里是我们后台根据我传递的页面路径和标识获取对应小程序的小程序码 返回一个图片临时缓存的url
wx.request({
url: app.data.proxy + '/miniprogram/getUnlimited',
data: {
type: app.data.pdd,
page:'pages/index/index'
},
success(res) {
var image = res.data.result;
//拿到临时url 使用getImageInfo缓存到本地
wx.getImageInfo({
src:image,
success(res){
//liload 小程序码本地缓存地址
var liload = res;
//获取用户设备宽高
wx.getImageInfo({
src: img,
success(res) {
var width,height;
wx.getSystemInfo({
success(res) {
width = res.screenWidth * 0.6;
height = Math.round(width * 1066 / 600);
that.setData({
canvasWidth: width,
canvasHeight: height
});
}
});
var x = width/750; //设置相对canvas自适应根元素大小
const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage('../img/pinduoduo.jpg', 0, 0, 500*x, 812*x);
ctx.save();
ctx.setTextAlign('center'); // 文字居中
ctx.setFillStyle('#fff'); // 文字颜色：黑色
ctx.setFontSize(16); // 文字字号
ctx.fillText(name, 250*x, 250*x); //名字
ctx.setFontSize(14); // 文字字号
ctx.fillText('邀请你使用【拼拼宝盒】', 250*x, 300*x);
ctx.save();
//圆形头像框
ctx.setStrokeStyle('rgba(0,0,0,.2)');
ctx.arc(250 * x, 140 * x, 60 * x, 0, 2 * Math.PI);
ctx.setStrokeStyle('rgba(0,0,0,.2)');
ctx.arc(250 * x, 460 * x, 120 * x, 0, 2 * Math.PI);
ctx.fill('#fff');
//小程序码
ctx.clip();
ctx.drawImage(liload.path, 150*x, 360*x, 200*x, 200*x);
//头像
ctx.clip();
ctx.drawImage(res.path, 190*x, 80*x, 120*x, 120*x);
ctx.save();
ctx.stroke();
ctx.draw();
wx.hideLoading();
}
});
}
})
}
});
[代码]
}
绘制完成
[图片]
保存事件
这里首先用getSetting检测用户有没有开启相册权限 有的话直接保存 没有的话弹到权限页面让用户授权
btnTap:function () {
[代码]var that = this;
wx.showLoading({
title: '正在保存',
mask: true,
});
wx.getSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveImg();
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveImg();
},
fail() {
wx.showToast({
title: '您没有授权，无法保存到相册',
icon: 'none'
})
}
})
} else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveImg();
} else {
wx.showToast({
title: '您没有授权，无法保存到相册',
icon: 'none'
})
}
}
})
}
}
})
[代码]
}
用户有授权调用保存图片API 保存图片到手机
saveImg：function（）{
[代码] wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: function (res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
var arr = [];
arr.push(tempFilePath);
//保存后全屏显示
wx.previewImage({
urls: arr,
current: arr
});
}
},
fail: function (res) { }
})
},
fail: function (res) {
wx.showToast({
title: '没有相册权限',
icon: 'none',
duration: 2000
});
}
})
}
});
[代码]
}
好了 就这么多了 第一次发帖 有不足之处望各路大佬见谅、指出不胜感激
附代码片段：https://developers.weixin.qq.com/s/8Z8oXbm17ojh
