<template>
<view class="container" style="padding-bottom: 30rpx;">
<view class="hdbg pr w100 " style="height: 150rpx;">
<top-bar content='分享' @Back="Back"></top-bar>
</view>
<view id="capture" class="page-body">
<view class="fx">
<image :src="list.image_base" mode="" crossorigin="anonymous"></image>
</view>
<view class="cred-arr">
<view class="cred">
<view class="erweim">
<image :src="list.qrcode" mode=""></image>
</view>
<!-- <view class="fs28 smwb smt">扫码下载APP</view> -->
</view>
</view>
</view>
<view class="page-foot flex justify-center pt30">
<view class="butten_left mr30" @click="generateImage">分享海报</view>
<view class="butten_right" @click="onshare">分享链接</view>
</view>
<canvas canvas-id="shareCanvas"
style="width: 750rpx; height: 1334rpx; position: fixed; left: -9999rpx;"></canvas>
</view>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
data() {
return {
list: {},
canvasWidth: 355,
canvasHeight: 600
}
},
onLoad() {
this.getlist()
},
methods: {
Back() {
uni.navigateBack()
},
getlist() {
this.https('xxxxxxx', 'Post').then((res) => {
console.log(res)
this.list = res
})
},
onshare() {
uni.setClipboardData({
data: this.list.url,
success: function() {
uni.showToast({
title: '复制链接成功',
icon: 'none',
duration: 2000
});
},
fail: function() {
console.log('复制失败');
}
});
},
async generateImage() {
// #ifdef APP
const ctx = uni.createCanvasContext('shareCanvas', this);
// 绘制背景
ctx.save();
ctx.drawImage(this.list.image_base, 0, 0, this.canvasWidth, this.canvasHeight);
ctx.restore();
// 绘制二维码
ctx.save();
const qrCodeSize = 160;
const qrCodeX = (this.canvasWidth - qrCodeSize) / 2;
const qrCodeY = this.canvasHeight - 240;
ctx.drawImage(this.list.qrcode, qrCodeX, qrCodeY, qrCodeSize, qrCodeSize);
ctx.restore();
// 绘制完成
ctx.draw(false, () => {
// 将canvas转换为图片
uni.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: (res) => {
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: () => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
},
fail: (err) => {
console.log('生成图片失败', err);
uni.showToast({
title: '生成图片失败',
icon: 'none'
});
}
}, this);
});
// #endif
// #ifndef APP
const element = document.getElementById('capture')
console.log(element)
html2canvas(element).then((canvas) => {
console.log(canvas)
const imagedata = canvas.toDataURL('image/png')
const link = document.createElement('a');
link.href = imagedata;
link.download = 'filename.png'; // 设置下载文件名
link.click(); // 触发下载
uni.showToast({
title: '下载海报成功',
icon: 'none',
duration: 2000
});
})
// #endif
}
}
}
</script>
<style>
.container {
width: 100%;
min-height: 100vh;
background-color: #f5f5f5;
}
.page-body {
width: 100%;
padding: 30rpx;
box-sizing: border-box;
position: relative;
}
.fx {
width: 100%;
margin-bottom: 30rpx;
}
.fx image {
width: 100%;
height: 1226rpx;
}
.cred-arr {
width: calc(100% - 60rpx);
display: flex;
justify-content: center;
position: absolute;
bottom: 260rpx;
}
.cred {
text-align: center;
}
.erweim {
width: 300rpx;
height: 300rpx;
margin: 0 auto;
}
.erweim image {
width: 100%;
height: 100%;
}
.page-foot {
width: 100%;
height: 158rpx;
background-color: #fff;
box-shadow: 0rpx 2rpx 14rpx 6rpx rgba(0,0,0,0.08);
margin-top: 30rpx;
}
.butten_left,
.butten_right {
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 40rpx;
font-size: 28rpx;
}
.butten_left {
background-color: #ff6b6b;
color: #fff;
}
.butten_right {
background-color: #4CAF50;
color: #fff;
}
</style>