⼩程序如何使⽤canvas⼆维码保存⾄⼿机相册前⾔
在使⽤canvas绘制海报的过程中不建议使⽤原⽣来进⾏画图，因为默认是不⽀持rpx像素的，px不会做到⾃适应。
推荐使⽤插件 Painter
github地址
（）…
配置很简单，也容易上⼿，⽆论是画矩形，还是将图⽚合成canvas；还是⾃⼰定义⽂字；都是很⽅便的。
附上⼀个简单的例⼦吧
<painter :customStyle="customStyle" :palette="imgDraw" />
//写文章的小程序
const _this=this;
success (res) {
_this.drawCanvas(res.windowHeight);
}
})
drawCanvas(height) {
//这⾥的canvas的⾼是动态获取设备的⾼度，做到⾃适应
const that = this;
let heightVal=height*2+'rpx';
this.imgDraw = {
width: '750rpx',
height: heightVal,
background: '#fff',
views: [
{
type: "rect",
css: {
top: '20rpx',
left: '130rpx',
color: '#1A1A1A',
width: '660rpx',
height: '220rpx',
borderRadius: '32rpx'
}
},
{
type: 'image',
url: './a.jpg',
css: {
top: '36rpx',
left: '16rpx',
width: '188rpx',
height: '188rpx'
}
},
{
type: 'text',
text: '',
css: {
top: '54rpx',
left: '260rpx',
fontSize: '48rpx',
color: "#fff"
}
},
{
type: 'text',
text: '⽂字部分',
css: {
top: '134rpx',
left: '260rpx',
fontSize: '30rpx',
color: "#d1d1d1"
}
},
{
type: 'text',
text: '1333333333',
css: {
top: '196rpx',
left: '260rpx',
fontSize: '26rpx',
color: "#d1d1d1"
}
},
{
type: 'text',
text: '李四',
css: {
top: '304rpx',
left: '302rpx',
fontSize: '24rpx',
color: "#767676"
}
},
{
type: 'image',
url: '/icon-localtion.png',
css: {
top: '275rpx',
left: '260rpx',
width: '26rpx',
height: '168rpx'
}
},
{
type: 'image',
url: '⼆维码.png',
css: {
top: '646rpx',
left: '236rpx',
width: '278rpx',
height: '278rpx'
}
}
]
}
let { path: __path } = StorageSync('createImagePath')
mpvue.saveImageToPhotosAlbum({
filePath: __path,
success(res) {
// mpvue.showToast({
//  title: '保存成功',
//  icon: 'success',
//  duration: 800,
//  mask: true
// });
},
fail(res) {
// mpvue.showToast({
/
/  title: '保存失败',
//  icon: 'fail',
//  duration: 800,
//  mask: true
// });
}
});
},
这⾥涉及到画⼆维码，如果你的⼆维码图⽚不是⼀个线上的链接的话，这时需要做⼀些⼩操作。
我的项⽬中⼆维码的图⽚传过来是⼀个流，所以⽤img的src默认发送get请求，就能拿到这个图⽚了。所以url会直接发送get请求拿到图⽚。
canvas的层级
canvas的层级是最⾼的，底部的分享块会被遮住，这时你需要⽤两套⽅案，⼀个是纯展⽰⽤的，⽤正常的html来写，给⽤户看这个名⽚。
下载或分享的时候再y⽤canvas⽣产你想要图⽚，接着调⽤的保存api，将图⽚下载或分享。
let { path: __path } = StorageSync('createImagePath')
mpvue.saveImageToPhotosAlbum({
filePath: __path,
success(res) {
// mpvue.showToast({
//  title: '保存成功',
//  icon: 'success',
//  duration: 800,
//  mask: true
// });
},
fail(res) {
// mpvue.showToast({
//  title: '保存失败',
//  icon: 'fail',
//  duration: 800,
//  mask: true
// });
}
});
此时就能顺利完成保存名⽚的功能了。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。