view转canvas下载照片功能已实现 （有bug）手机字体分辨率自适应的问题暂时还没有解决 希望有大佬能够指点一
<template>
<view>
<navbar
navBackgroundColor="#FFF"
:backVisible="true"
:title="title"
></navbar>
<canvas class="canvas-area" canvas-id="postCanvars"></canvas>
<!-- 显示在页面的证书 -->
<view class="share-area">
<!-- 背景图 -->
<image class="code-bg" :src="sharePoster" mode="widthFix"></image>
<!-- 证件照 -->
<view class="certificates">
<image class="certificates-img" :src="certificatesImg" mode="widthFix"></image>
</view>
<!-- 个人信息 -->
<view class="persona-iInformation">
<!-- 姓名 -->
<view class="name">{
{personalInformationData.name}}</view>
<!-- 证件号码 -->
<view class="identification-numder">{
{personalInformationData.IdentificationNumder}}</view>
<!-- 性别 -->
<view class="sex">{
{personalInformationData.sex}}</view>
<!-- 出生年月 -->
<view class="dateOf-dirth">{
{personalInformationData.dateOfDirth}}</view>
<!-- 专业 -->
<view class="major">{
{personalInformationData.major}}</view>
<!-- 批准日期 -->
<view class="approval-date">{
{personalInformationData.approvalDate}}</view>
</view>
<!-- 二维码 -->
<view class="code">
<image class="code-img" :src="code" mode="widthFix"></image>
</view>
</view>
<view class="btn-area">
<button @tap="saveFile" class="line-circle-btn">保存图片</button>
</view>
</view>
</template>export default{
data(){
return {
title:'证书查询',
sharePoster: '',
// 证件照片
certificatesImg:'',
// 二唯码
code:'',
// 个人信息
personalInformationData:{
// 姓名
name:'李某某',
// 证件号码
IdentificationNumder:'123456789778945612',
//性别
sex:'女',
// 出生年月
dateOfDirth:'2022-03-02',
// 专业
major:'营养师',
// 批准日期
approvalDate:'2022-03-02'
},
}
},
onLoad() {
// 背景图
let img = 'https://open-laser.oss-cn-shanghai.aliyuncs.com/60b9e27dd93049aeb5d870f65c14093f.jpg'
//证件照片
let certificatesImg ='https://open-laser.oss-cn-shanghai.aliyuncs.com/ab965f82ebc64f92bd2f3d53c595bfb0.jpg'
// 二唯码
let code = 'https://open-laser.oss-cn-shanghai.aliyuncs.com/97be32e348c5440996c75817762d7812.png'
// #ifdef MP-WEIXIN
// 背景图
uni.downloadFile({
url: img,
success: (res)=>{
this.sharePoster = res.tempFilePath
}
})
// 证件照片
uni.downloadFile({
url: certificatesImg,
success: (res)=>{
this.certificatesImg = res.tempFilePath
}
})
// 二唯码
uni.downloadFile({
url: code,
success: (res)=>{
this.code = res.tempFilePath
}
})
// #endif
},
methods:{
// 保存照片
saveFile(){
uni.showLoading({
title: '正在保存图片...'
})
let _this = this
uni.getImageInfo({
src: this.sharePoster,
success(res) {
let ctx = uni.createCanvasContext('postCanvars')
//设置画布的宽高
ctx.setFillStyle('#FFFFFF'); // 默认白色
ctx.fillRect(0, 0, uni.upx2px(1755), uni.upx2px(1242))
//画背景
ctx.drawImage(res.path, 0, 0, uni.upx2px(1755), uni.upx2px(1242))
// 信息填写
// 姓名
ctx.setFillStyle('#333333')
ctx.setFontSize(14)
ctx.textAlign = 'center'
ctx.fillText(_this.personalInformationData.name,600,300)
// 证件号码
ctx.setFillStyle('#333333')
ctx.setFontSize(14)
ctx.textAlign = 'center'
ctx.fillText(_this.personalInformationData.IdentificationNumder,650,335)
// 性别
ctx.setFillStyle('#333333')
ctx.setFontSize(14)
ctx.textAlign = 'center'
ctx.fillText(_this.personalInformationData.sex,585,367)
// 出生年月
ctx.setFillStyle('#333333')
ctx.setFontSize(14)
ctx.textAlign = 'center'
ctx.fillText(_this.personalInformationData.dateOfDirth,615,398)
// 专业
ctx.setFillStyle('#333333')
ctx.setFontSize(14)
ctx.textAlign = 'center'
ctx.fillText(_this.personalInformationData.major,600,430)
//批准日期
ctx.setFillStyle('#333333')
ctx.setFontSize(14)
ctx.textAlign = 'center'
ctx.fillText(_this.personalInformationData.approvalDate,615,460)
// 证件照片
ctx.drawImage(_this.certificatesImg, 600, 130, uni.upx2px(180), uni.upx2px(250))
// 二维码
ctx.drawImage(_this.code, 730, 490, uni.upx2px(100), uni.upx2px(100))
// 生成照片保存
ctx.draw(true, () => {
uni.canvasToTempFilePath({
canvasId: 'postCanvars',
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success: (res) => {
uni.hideLoading()
uni.showToast({
title:'生成照片成功'
})
},
fail: (res) => {
uni.hideLoading()
uni.showToast({
title:'生成照片失败'
})
}
})
},
fail: (res) => {
uni.hideLoading()
uni.showToast({
title:'生成照片失败'
})
}
})
})
},
fail: (res) => {
uni.hideLoading()
uni.showToast({
title:'保存图片失败'
})
}
})
}
}
}
</script><style>
.share-area{
/* width: 690rpx;
margin: 30rpx; */
position: relative;
}
.canvas-area{
width: 1755rpx;
height: 1242rpx;
background: '#FFFFFF';
border-radius: 20rpx;
position: absolute;
left: -10000rpx;
}
.code-bg{
position: relative;
z-index: -99999;
width: 100%;
border-radius: 20rpx;
}
.certificates{
width: 35px;
height: 41px;
/* background: #EB2C3E; */
position: absolute;
top: 56px;
right: 78px;
}
.certificates-img , .code-img{
width: 100%;
height: 100%;
}
.persona-iInformation{
width: 80px;
position: absolute;
top: 120px;
right: 46px;
line-height: 13px;
font-size: 6px;
}
.code{
width: 25px;
height: 25px;
position: absolute;
bottom: 39px;
right: 41px;
/* background: #EB2C3E; */
}
.line-circle-btn{
margin-top: 30px;
width: 177rpx;
height: 62rpx;
border-radius: 50rpx;
line-height: 62rpx;
border-radius: 35rpx;
font-size: 26rpx;
color: #666666;
border: 1px solid #B8B8B8;
}
.share-btn{
width: 198rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
/* background: #EB2C3E; */
border-radius: 38rpx;
font-size: 34rpx;
font-weight: 500;
color: #FFFFFF;
}
button::after{
border: none;
}
.btn-area{
display: flex;
margin: 0 69rpx;
align-items: center;
}
</style>