一授舟、前端生成二維碼
1、import uQRCode from './uqrcode.js' 引入
2贸辈、結(jié)構(gòu)
<template>
<view class="main_box">
<canvas canvas-id="qrcode" style="width: 450rpx; height: 450rpx;"></canvas>
</view>
</template>
3释树、數(shù)據(jù)
data() {
return {
id: '123456' //用戶id
}
},
4、生成方法
toJSON() {}, //不加會(huì)報(bào)錯(cuò)
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) {
//這里即拿到了掃描出的數(shù)據(jù)
_this.code = res.result;
},
fail(err) {
console.log('掃碼失敗', err);
},
complete(end) {
console.log('掃碼結(jié)束',end)
}
});
二躏哩、后端生成,前端繪制圓角矩形卡片
1、結(jié)構(gòu)
<canvas canvas-id="card" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"></canvas>
2揉燃、數(shù)據(jù)
data() {
return {
windowWidth: 0,
windowHeight: 0,
url: '',
headPortrait:''
};
},
3扫尺、初始化數(shù)據(jù)
getRange() {
let { windowWidth, windowHeight } = uni.getSystemInfoSync();
this.windowHeight = windowHeight;
this.windowWidth = windowWidth;
},
4、調(diào)用接口，獲取返回值
//轉(zhuǎn)化圖片
this.base64ToSrc(res.data.result, src => {
this.initCanvas(src);
});
//將base64轉(zhuǎn)化
base64ToSrc: function(base64Data, callback) {
// base64 轉(zhuǎn)格式圖片
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()
// 因?yàn)檫吘壝柽叴嬖阡忼X，最好指定使用 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都可以摔癣，二選一即可姑曙，但是需要與上面對(duì)應(yīng)
// 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('標(biāo)題一', 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('標(biāo)題二', 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('標(biāo)題三', 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('標(biāo)題四', sp_left, this.computedPoorWidth(345));
// ctx.fillText('標(biāo)題五', 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: '已保存至手機(jī)相冊(cè)',
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();
}
});
}
});
}
