绘制canvas画布和保存到手机
getShareQrCode() {
let that = this
return new Promise((resolve, reject) => {
wx.request({
url: 'GET_QRCODE', //请求路径
method: "POST",
data: {
sceneParam: that.data.sceneParam, //传入的参数
pageUrl: that.data.pageUrl //指定页面路由
},
fail: function (res) {
wx.showToast({
title: '海报生成失败',
icon: 'error'
})
},
success: function (res) {
if (res.data.isSuccess == 'Y')
resolve(res.data.codePath) //回调图片链接
else {
wx.showToast({
title: '海报生成失败',
icon: 'error'
})
reject("二维码获取失败")
}
}
});
});
},
// 创建画布
async createShareCanvas() {
let that = this
let QrCode = await that.getShareQrCode() //获取圆圈内的图片
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
// 缩放和宽高
const dpr = wx.getSystemInfoSync().pixelRatio // 设备像素比
canvas.width = 375 * dpr
canvas.height = 667 * dpr
ctx.scale(dpr, dpr)
// 绘制背景
const background = canvas.createImage()
background.src = "https://***.***/shareBackground.png"
background.onload = () => {
ctx.drawImage(background, 0, 0, canvas.width/dpr, canvas.height/dpr)
ctx.moveTo(110, 590)
ctx.lineTo(110, 630)
ctx.strokeStyle = "white";
ctx.stroke()
ctx.fillStyle = "white";
ctx.font = "bold 16px Arial"
ctx.fillText('16px大一点的文字', 120, 605)
ctx.font = "300 13px Arial"
ctx.fillText('13px小一点的文字', 120, 625)
// 绘制二维码
ctx.save()
const miniQrCode = canvas.createImage()
miniQrCode.src = QrCode
miniQrCode.onload = () => {
// ctx.drawImage(miniQrCode, 20, 570, 80, 80)
var canvasW = 80; //绘制的二维码宽度
var canvasH = 80; //绘制的二维码高度
var canvasL = 20; //绘制的二维码在画布上的位置
var canvasT = 570; //绘制的二维码在画布上的位置 y轴值越大越靠下
//先画个圆
ctx.save(); // 先保存状态 已便于画完圆再用
ctx.beginPath();
ctx.arc(canvasL + 40, canvasT + 40, 40, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
ctx.drawImage(miniQrCode, canvasL, canvasT, canvasW, canvasH); // 推进去图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
wx.showToast({
title: '海报生成成功',
icon: 'success'
})
}
// ctx.draw(true)
}
})
},
// 保存画布内容
saveShareCanvas() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
wx.canvasToTempFilePath({ //将canvas生成图片
canvas: canvas,
success: function (res) {
wx.saveImageToPhotosAlbum({ //保存图片到相册
filePath: res.tempFilePath,
success: function () {
wx.showToast({
title: "图片保存成功!",
duration: 2000
})
},
fail(res) {
if (res.errMsg != 'saveImageToPhotosAlbum:fail cancel') {
wx.showModal({
content: '检测到您没有授权保存图片或视频到你的相册权限,是否去设置打开?',
confirmText: "确认",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {}
})
}
}
});
}
}
})
},
fail: function (res) {
console.log(res)
}
})
})
},
<!-- 画布 van-* 用的vantUI -->
<van-overlay show="{{ shareCanvas }}">
<view style="height:100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
<canvas type="2d" id="myCanvas" style="width: 375px; height: 667px"></canvas>
<view style="display: flex; justify-content: space-between;width: 70%; margin-top: 20rpx;">
<van-button round type="default" size="small" block style="width: 200rpx;" bind:tap="changeShareCanvas">取消</van-button>
<van-button round color="#fe9400" size="small" block style="width: 200rpx;" bind:tap="saveShareCanvas">保存</van-button>
</view>
</view>
</van-overlay>