<view class="poster-test" :style="'height:'+(posterHeight+20)+'px;'">
<canvas canvas-id="poster-qr" id='sss' :style="'width:'+posterWidth+'px;height:'+posterHeight+'px;'"></canvas>
</view>
computed: {
windowW() {
return uni.getSystemInfoSync().windowWidth;
},
windowH() {
return uni.getSystemInfoSync().windowHeight;
},
qrsize() {
let windowW = uni.getSystemInfoSync().windowWidth;
return windowW * 0.7;
},
posterPadding(){
return 40;
},
posterWidth(){
let canvasWidth = this.qrsize + this.posterPadding * 2;
return canvasWidth;
},
posterHeight(){
let canvasHeight = this.posterWidth + 30 + this.posterPadding*2;
return canvasHeight;
},
},
// 制作二维码海报
makePoster(qrPath) {
let that = this;
let logoPath = require('@/pages/devices/device_info/static/poster_logo.png');
console.log("rk===>[logo]", logoPath);
let qr_padding = this.posterPadding;
let canvasWidth = this.posterWidth;
let canvasHeight = this.posterHeight;
var ctx = uni.createCanvasContext('poster-qr'); //绑定画布
// 绘制白色圆角背景
const cornerRadius = 10; // 圆角半径
ctx.setFillStyle('#ffffff'); // 设置填充颜色为白色
ctx.beginPath();
ctx.moveTo(cornerRadius, 0);
ctx.arcTo(canvasWidth, 0, canvasWidth, canvasHeight, cornerRadius);
ctx.arcTo(canvasWidth, canvasHeight, 0, canvasHeight, cornerRadius);
ctx.arcTo(0, canvasHeight, 0, 0, cornerRadius);
ctx.arcTo(0, 0, canvasWidth, 0, cornerRadius);
ctx.closePath();
ctx.fill();
// qr
let qr_size = this.qrsize;
ctx.drawImage(qrPath, qr_padding, qr_padding, qr_size, qr_size); //填充进图片
// logo 200 * 30;
let logo_width = 200;
let logo_height = 30;
let logo_start_x = (canvasWidth - logo_width) / 2;
let logo_start_y = canvasWidth;
ctx.drawImage(logoPath, logo_start_x, logo_start_y, logo_width, logo_height); //填充进图片
// 文字
let text_x = canvasWidth/2;
let text_y = logo_start_y + logo_height + qr_padding;
ctx.setFillStyle('#000000'); //设置文字样式
ctx.setFontSize(18);
ctx.setTextAlign('center');
ctx.fillText('使用 santibox APP 扫码添加设备', text_x, text_y);
ctx.draw(); //输出到画布中
uni.showLoading({ //增加loading等待效果
mask: true
})
setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
console.log("rk===>[laile]", );
uni.canvasToTempFilePath({
canvasId: 'poster-qr',
success: (res) => {
this.poster_test = res.tempFilePath
console.log("rk===>[地址]", res.tempFilePath);
that.savePoster(this.poster_test)
},
fail(err) {
console.log("rk===>[生成失败]", err);
},
})
uni.hideLoading();
}, 1200)
},
savePoster(posterPath) {
uni.saveImageToPhotosAlbum({ //保存图片
filePath: posterPath,
success: (res) => {
uni.showToast({
title: '保存成功',
})
}
})
},
