一、前端生成二维码
1、import uQRCode from './uqrcode.js' 引入
2、结构
<template>
<view class="main_box">
<canvas canvas-id="qrcode" style="width: 450rpx; height: 450rpx;"></canvas>
</view>
</template>
3、数据
data() {
return {
id: '123456' //用户id
}
},
4、生成方法
toJSON() {}, //不加会报错
async loadList() {
await uQRCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: this.id,
size: uni.upx2px(450),
margin: 20,
backgroundColor: '#ffffff', //背景颜色
foregroundColor: '#000000',
fileType: 'jpg',
correctLevel: uQRCode.defaults.correctLevel,
}).then(res => {
console.log(res)
})
}
5、扫描方法
const _this = this;
uni.scanCode({
// scanType: ['qrCode'], 扫描的类型
success(res) {
//这里即拿到了扫描出的数据
_this.code = res.result;
},
fail(err) {
console.log('扫码失败', err);
},
complete(end) {
console.log('扫码结束',end)
}
});
二、后端生成,前端绘制圆角矩形卡片
1、结构
<canvas canvas-id="card" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"></canvas>
2、数据
data() {
return {
windowWidth: 0,
windowHeight: 0,
url: '',
headPortrait:''
};
},
3、初始化数据
getRange() {
let { windowWidth, windowHeight } = uni.getSystemInfoSync();
this.windowHeight = windowHeight;
this.windowWidth = windowWidth;
},
4、调用接口，获取返回值
//转化图片
this.base64ToSrc(res.data.result, src => {
this.initCanvas(src);
});
//将base64转化
base64ToSrc: function(base64Data, callback) {
// base64 转格式图片
base64ToPath('data:image/png;base64,' + base64Data)
.then(path => {
callback(path);
})
.catch(error => {
console.error(error);
});
},
5、
let ctx = uni.createCanvasContext('card')
// 绘画图片
let sp_left = this.computedSpaceBetween(this.windowWidth, this.computedPoorWidth(66));
let x = 0,
y = 0,
w = this.windowWidth,
h = this.windowHeight,
r = 10
ctx.beginPath()
// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
ctx.setFillStyle('transparent')
ctx.setStrokeStyle('transparent')
// 左上角
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
ctx.setFillStyle('#3F72F1');
ctx.fill();
// border-top
ctx.moveTo(x + r, y)
ctx.lineTo(x + w - r, y)
ctx.lineTo(x + w, y + r)
// 右上角
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
ctx.setFillStyle('#3F72F1');
ctx.fill();
// // border-right
ctx.lineTo(x + w, y + h - r)
ctx.lineTo(x + w - r, y + h)
// // 右下角
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
ctx.setFillStyle('#ffffff');
ctx.fill();
// // border-bottom
ctx.lineTo(x + r, y + h)
ctx.lineTo(x, y + h - r)
// // 左下角
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
ctx.setFillStyle('#ffffff');
ctx.fill();
// // border-left
ctx.lineTo(x, y + r)
ctx.lineTo(x + r, y)
// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
// ctx.fill()
// ctx.stroke()
ctx.closePath()
// 剪切
ctx.clip()
ctx.restore()
// ctx.setFillStyle('#ffffff');
// ctx.strokeStyle = "#ffffff"
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.fillRect(
this.computedSpaceBetween(this.windowWidth, this.computedPoorWidth(337)),
this.computedPoorWidth(25),
this.computedPoorWidth(337),
this.computedPoorWidth(500)
);
let path = 'https://dev.gchshi.com/patient/images/reproduction/share_head.png'
ctx.drawImage(path, 0, this.computedPoorWidth(0), this.windowWidth, this.computedPoorWidth(100));
ctx.drawImage(this.headPortrait, sp_left, this.computedPoorWidth(50), this.computedPoorWidth(66), this.computedPoorWidth(66));
// 头像
// 二维码
sp_left = this.computedSpaceBetween(this.windowWidth, this.computedPoorWidth(100));
ctx.drawImage(this.url, sp_left, this.computedPoorWidth(205), this.computedPoorWidth(100), this.computedPoorWidth(110));
sp_left = this.computedSpaceBetween(this.windowWidth, this.computedPoorWidth(200));
ctx.setFontSize(18);
ctx.setTextAlign('center');
ctx.setTextBaseline('top');
ctx.setFillStyle('black');
sp_left = this.computedSpaceBetween(this.windowWidth, 0);
ctx.fillText('名字', sp_left, this.computedPoorWidth(140));
ctx.setFontSize(12);
ctx.setTextAlign('center');
ctx.setTextBaseline('top');
ctx.setFillStyle('#666666');
sp_left = this.computedSpaceBetween(this.windowWidth, 0);
ctx.fillText('标题一', sp_left, this.computedPoorWidth(170));
sp_left = this.computedSpaceBetween(this.windowWidth, 35);
ctx.stroke();
ctx.setFontSize(18);
ctx.setTextAlign('center');
ctx.setTextBaseline('top');
ctx.setFillStyle('black');
sp_left = this.computedSpaceBetween(this.windowWidth, 0);
// ctx.fillText('标题二', sp_left, this.computedPoorWidth(210));
ctx.setFontSize(14);
ctx.setTextAlign('center');
ctx.setTextBaseline('top');
ctx.setFillStyle('#999999');
sp_left = this.computedSpaceBetween(this.windowWidth, 0);
// ctx.fillText('标题三', sp_left, this.computedPoorWidth(240));
// ctx.setFontSize(12);
// ctx.setTextAlign('center');
// ctx.setTextBaseline('top');
// ctx.setFillStyle('#525157');
sp_left = this.computedSpaceBetween(this.windowWidth, 0);
ctx.fillText('标题四', sp_left, this.computedPoorWidth(345));
// ctx.fillText('标题五', sp_left, this.computedPoorWidth(405));
ctx.draw();
三、保存图片，分享朋友，分享朋友圈
1、保存图片
// 保存图片
saveImage: function() {
uni.showLoading({ title: '正在生成图片...' });
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: this.windowWidth,
height: this.windowHeight,
canvasId: 'card',
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: data => {
showToast({
title: '已保存至手机相册',
icon: 'none'
});
uni.hideLoading();
},
fail: err => {
console.log(err);
},
complete: () => {
uni.hideLoading();
}
});
}
});
},
2、分享朋友
// 分享到微信好友
shareWeixin() {
uni.showLoading({
title: '努力加载中'
});
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 5,
imageUrl: '',//png地址
title: '',
miniProgram: {
id: '',
path: '',
type: 0,
webUrl: ''
},
success: ret => {
showToast({
title: '分享成功',
icon: 'none'
});
uni.hideLoading();
}
});
},
3、分享到朋友圈
// 分享到微信朋友圈
shareTimeline() {
uni.showLoading({ title: '正在生成图片...' });
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: this.windowWidth,
height: this.windowHeight,
canvasId: 'card',
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: data => {
uni.share({
provider: 'weixin',
scene: 'WXSenceTimeline',
type: 2,
imageUrl: res.tempFilePath,
success: function(res) {
showToast({
title: '分享成功',
icon: 'none'
});
uni.hideLoading();
},
fail: function(err) {
console.log(err);
}
});
},
fail: err => {
console.log(err);
},
complete: () => {
uni.hideLoading();
}
});
}
});
}
