没空解释了自己慢慢研究
注意:在web端可以利用html2canvas插件,原理也非常简单
但是在小程序里没有document,所以要用canvas画,当然还可以用webview标签引入一个html页面再导出就行了(尝试中。。。。)
原理是第一步:
- 用canvas标签画页面
- 再用.draw画成功后保存到本地存储或者vuex中
- 最后在点击导出图片的按钮上写个uniapp的 uni.saveImageToPhotosAlbum()方法保存到相册
<template>
<view class="feedback">
<com-loading :hidden="!loading" />
<bannerTitle
title="团体二维码"
back
/>
<view
class="success"
:style="{ top: bgHeight }"
>
<canvas
class="myCanvas"
canvas-id="myCanvas"
/>
<button
type="primary"
@tap="myimg()"
>
生成照片并保存至手机
</button>
<view id="picture">
<view class="titleTime">
有效期截至{{ info.endDate }}
</view>
<view class="title_qr">
{{ info.organizeName }}
</view>
<img
class="head_bg"
:src="info.qrCode"
>
<view class="tip_box">
<view class="title_info">
联系人信息
</view>
<view class="tip">
<view class="left">
团体联系人
</view>
<view class="right">
{{ info.contactsName }}
</view>
</view>
<view class="tip">
<view class="left">
证件号
</view>
<view class="right">
{{ info.idNumber }}
</view>
</view>
<view class="tip">
<view class="left">
团体详细地址
</view>
<view class="right address">
{{ info.organizeAddress }}
</view>
</view>
</view>
</view>
<!-- <view
class="myBtn"
:style="{ top: bgHeight }"
style="color: #FE242B"
>
可直接手机截屏保存在本机!
</view> -->
<!-- 按钮 -->
<view
class="myBtn"
:style="{ top: bgHeight }"
>
<u-button @tap="saveBase64Image">
生成照片并保存至手机
</u-button>
</view>
</view>
</view>
</template>
<script>
import { getOrganizeCode } from "@/api";
let bgHeight = uni.getSystemInfoSync().statusBarHeight + 43 + 'px';
export default {
data() {
return {
info: {
endDate:'',
organizeName: '',
contactsName: '',
idNumber: '',
organizeAddress: ''
},
bgHeight: bgHeight,
loading: false,
//canvas画图
poster: {},
posterImage: '',
canvasId: 'default_PosterCanvasId'
};
},
computed: {
},
watch: {},
onReady() {
},
onLoad: function (options) {
this.getOrganizeCode();
},
onShow: function () {},
methods: {
//点击生成图片并下载
scxz(){
let testCanvas = uni.createCanvasContext('myCanvas',this);
let qrImg = "../../static/1.png"; // 主图本地路径,也可以用网络地址
// 1.绘制大小及背景颜色
testCanvas.setFillStyle('#fff'); // 默认白色
testCanvas.fillRect(0, 0, 200, 400); // fillRect(x,y,宽度,高度)
// 2.写入文字
testCanvas.setFontSize(16);
testCanvas.setFillStyle('black');
testCanvas.fillText(`有效期截至2022-05-13`, 100, 25);
testCanvas.fillText('团体名字', 130, 55);
testCanvas.font = 'bold 30px "PingFang SC"';
testCanvas.textAlign = 'center';
// 3.绘制二维码
testCanvas.drawImage(this.info.qrCode, 50, 50, 250, 250); // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
// 4.写入文字
testCanvas.setFontSize(15);
testCanvas.setFillStyle('black');
testCanvas.fillText('联系人信息', 60, 350);
testCanvas.setFontSize(10);
testCanvas.fillText('团体联系人', 80, 390);
testCanvas.fillText('迪丽热巴', 280, 390);
testCanvas.fillText('证件号', 80, 420);
testCanvas.fillText('211*******65', 280, 420);
testCanvas.fillText('团体详细地址', 80, 450);
testCanvas.fillText('中关村壹号', 280, 450);
//合成
testCanvas.draw(true,()=>{
uni.canvasToTempFilePath({
canvasId:'myCanvas',
success: (res) => {
uni.getImageInfo({
src:res.tempFilePath,
success(re) {
uni.setStorageSync('imgs',re.path);
}
});
}
});
});
},
// 点击保存
myimg(){
console.log("保存为图片",uni.getStorageSync('imgs'));
uni.saveImageToPhotosAlbum({
filePath: uni.getStorageSync('imgs'),
success: function() {
uni.showToast({
icon: 'none',
position: 'bottom',
title: "图片已下载至【图库】,请打开【图库】查看",
});
}
});
},
getOrganizeCode(){
this.loading = true;
getOrganizeCode().then(res=>{
if (res.code===200) {
this.info = res.data;
// 获取到数据后再绘画canvas
this.scxz();
this.loading = false;
}
});
},
// 点击生成二维码按钮
saveBase64Image() {
// var save = wx.getFileSystemManager();
// var number = Math.random();
// save.writeFile({
// filePath: wx.env.USER_DATA_PATH + "/pic" + number + ".png",
// data: this.info.qrCode.slice(22),
// encoding: "base64",
// success: (res) => {
// wx.saveImageToPhotosAlbum({
// filePath: wx.env.USER_DATA_PATH + "/pic" + number + ".png",
// success: function (res) {
// wx.showToast({
// title: "保存成功",
// });
// },
// fail: function (err) {
// wx.getSetting({
// success(res) {
// if(res.authSetting['scope.writePhotosAlbum']) { // 已授权,用户点击了取消按钮,无需其他操作
// uni.showToast({
// icon: 'none',
// title: '取消'
// });
// }
// if(res.authSetting['scope.writePhotosAlbum'] === false) { // 未授权,需用户跳转设置页面开启权限
// uni.showModal({
// title: '提示',
// content: `图片保存失败,请前往设置页面允许保存相册`,
// confirmColor: '#439AEA',
// success: function (res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// uni.openSetting({
// success(res) {
// // console.log('用户打开设置页面');
// }
// });
// } else if (res.cancel) {
// // console.log('用户点击取消');
// uni.showToast({
// icon: 'none',
// title: '取消'
// });
// }
// }
// });
// }
// }
// });
// },
// });
// console.log(res);
// },
// fail: (err) => {
// console.log(err);
// },
// });
},
},
};
</script>
<style lang="scss" scoped>
.feedback {
min-height: 100vh;
background: url("https://azero-dev.oss-cn-beijing.aliyuncs.com/survey/antigen/index_background.png")
no-repeat;
background-size: 100% 683rpx;
overflow-y: auto;
height: 100vh;
.success {
background: #fff;
margin: 0 30rpx;
border-top: 16rpx solid #f8f8f8;
text-align: center;
position: relative;
box-shadow: 0px 2rpx 15rpx 0px rgba(11, 49, 174, 0.08);
border-radius: 25rpx;
padding-bottom: 100rpx;
.myCanvas{
width: 100%;
height: 1200rpx;
border:1rpx solid red;
}
.head_bg {
width: 500rpx;
height: 500rpx;
margin-bottom: 70rpx;
}
.titleTime {
margin-top: 40rpx;
}
.title_qr {
margin-top: 40rpx;
font-size: 36rpx;
font-weight: 600;
height: 38rpx;
font-size: 36rpx;
font-weight: 500;
color: #000000;
line-height: 42rpx;
margin-bottom: 48rpx;
}
.tip_box {
padding-top: 90rpx;
border-top: 2rpx dotted #427cef;
.title_info {
padding: 0 37rpx;
height: 34rpx;
font-size: 28rpx;
font-weight: bold;
color: #333333;
line-height: 34rpx;
text-align: left;
margin-bottom: 27rpx;
}
}
.tip {
font-size: 26rpx;
display: flex;
padding: 0 80rpx;
height: 70rpx;
vertical-align: middle;
.left {
text-align: left;
width: 35%;
}
.right {
text-align: right;
width: 65%;
}
.address {
vertical-align: middle;
}
}
}
}
.myBtn {
width: 500rpx;
line-height: 88rpx;
height: 88rpx;
border-radius: 10rpx;
opacity: 1;
margin-left: 124rpx;
margin-top: 80rpx;
/deep/.u-button {
height: 88rpx;
border-radius: 10rpx;
opacity: 1;
border: 2rpx solid #4293f4;
font-size: 32rpx;
font-weight: 400;
color: #4293f4;
}
}
</style>