326 lines
9.9 KiB
Vue
326 lines
9.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="preview-container">
|
|||
|
|
<!-- 右上角关闭按钮 -->
|
|||
|
|
<view class="close-btn" @click="close">
|
|||
|
|
<text class="close-icon">✕</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 下载按钮 -->
|
|||
|
|
<view class="download-btn" @click="downloadImage">
|
|||
|
|
<text class="download-icon">⬇️</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 图片预览区域，使用movable-area和movable-view实现缩放移动 -->
|
|||
|
|
<movable-area class="movable-area" :style="{ width: '100vw', height: '100vh' }">
|
|||
|
|
<movable-view
|
|||
|
|
class="movable-view"
|
|||
|
|
direction="all"
|
|||
|
|
:scale="true"
|
|||
|
|
:scale-min="0.5"
|
|||
|
|
:scale-max="3"
|
|||
|
|
:scale-value="scaleValue"
|
|||
|
|
@scale="onScale"
|
|||
|
|
:x="x"
|
|||
|
|
:y="y"
|
|||
|
|
:style="{
|
|||
|
|
width: rotatedWidth + 'px',
|
|||
|
|
height: rotatedHeight + 'px'
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="image-wrapper"
|
|||
|
|
:style="{
|
|||
|
|
width: imgWidth + 'px',
|
|||
|
|
height: imgHeight + 'px',
|
|||
|
|
transform: 'rotate(90deg)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<image
|
|||
|
|
:src="imageUrl"
|
|||
|
|
class="preview-img"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
:style="{
|
|||
|
|
width: imgWidth + 'px',
|
|||
|
|
height: imgHeight + 'px'
|
|||
|
|
}"
|
|||
|
|
@load="onImageLoad"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</movable-view>
|
|||
|
|
</movable-area>
|
|||
|
|
|
|||
|
|
<!-- 图片信息提示 -->
|
|||
|
|
<view class="scale-tip" v-if="showScaleTip">
|
|||
|
|
当前缩放: {{ Math.round(scaleValue * 100) }}%
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.imageUrl = decodeURIComponent(options.url) // 接收传递的图片URL，需要解码
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
imageUrl: '',
|
|||
|
|
// 缩放相关
|
|||
|
|
scaleValue: 1,
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
// 图片原始尺寸
|
|||
|
|
imgWidth: 0,
|
|||
|
|
imgHeight: 0,
|
|||
|
|
// 旋转后的尺寸（交换宽高）
|
|||
|
|
rotatedWidth: 0,
|
|||
|
|
rotatedHeight: 0,
|
|||
|
|
// 提示显示控制
|
|||
|
|
showScaleTip: false,
|
|||
|
|
tipTimer: null,
|
|||
|
|
// 屏幕尺寸
|
|||
|
|
windowWidth: 0,
|
|||
|
|
windowHeight: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
// 获取屏幕尺寸
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
this.windowWidth = systemInfo.windowWidth;
|
|||
|
|
this.windowHeight = systemInfo.windowHeight;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 图片加载完成后获取尺寸
|
|||
|
|
onImageLoad(e) {
|
|||
|
|
const { width, height } = e.detail;
|
|||
|
|
|
|||
|
|
// 保存原始尺寸
|
|||
|
|
this.imgWidth = width;
|
|||
|
|
this.imgHeight = height;
|
|||
|
|
|
|||
|
|
// 旋转90度后，宽度和高度互换
|
|||
|
|
this.rotatedWidth = height; // 旋转后宽度 = 原高度
|
|||
|
|
this.rotatedHeight = width; // 旋转后高度 = 原宽度
|
|||
|
|
|
|||
|
|
// 计算初始位置居中
|
|||
|
|
this.resetPosition();
|
|||
|
|
|
|||
|
|
console.log('图片加载:', {width, height}, '旋转后:', {rotatedWidth: this.rotatedWidth, rotatedHeight: this.rotatedHeight});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 重置位置到中心
|
|||
|
|
resetPosition() {
|
|||
|
|
// 计算居中的偏移量
|
|||
|
|
this.x = (this.windowWidth - this.rotatedWidth) / 2;
|
|||
|
|
this.y = (this.windowHeight - this.rotatedHeight) / 2;
|
|||
|
|
|
|||
|
|
console.log('重置位置:', {x: this.x, y: this.y, windowWidth: this.windowWidth, windowHeight: this.windowHeight});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 缩放事件处理
|
|||
|
|
onScale(e) {
|
|||
|
|
this.scaleValue = e.detail.scale;
|
|||
|
|
|
|||
|
|
// 显示缩放提示
|
|||
|
|
this.showScaleTip = true;
|
|||
|
|
if (this.tipTimer) {
|
|||
|
|
clearTimeout(this.tipTimer);
|
|||
|
|
}
|
|||
|
|
this.tipTimer = setTimeout(() => {
|
|||
|
|
this.showScaleTip = false;
|
|||
|
|
}, 1500);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭预览
|
|||
|
|
close() {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 下载图片
|
|||
|
|
downloadImage() {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '下载中...'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 先获取图片信息（如果是网络图片需要先下载）
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: this.imageUrl,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode === 200) {
|
|||
|
|
// 保存图片到相册
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: res.tempFilePath,
|
|||
|
|
success: () => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '保存成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
console.error('保存失败', err);
|
|||
|
|
|
|||
|
|
// 处理用户拒绝权限的情况
|
|||
|
|
if (err.errMsg.includes('auth deny')) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '需要您授权保存图片到相册',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.openSetting({
|
|||
|
|
success: (settingRes) => {
|
|||
|
|
console.log('打开设置页面', settingRes);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '保存失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '下载失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
console.error('下载失败', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '下载失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 双击重置缩放和位置（可选功能）
|
|||
|
|
onDoubleTap() {
|
|||
|
|
this.scaleValue = 1;
|
|||
|
|
this.resetPosition();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 页面返回前清理定时器
|
|||
|
|
onUnload() {
|
|||
|
|
if (this.tipTimer) {
|
|||
|
|
clearTimeout(this.tipTimer);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.preview-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #000;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.movable-area {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.movable-view {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: transform 0.1s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-img {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭按钮
|
|||
|
|
.close-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1000;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
|
|||
|
|
.close-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载按钮
|
|||
|
|
.download-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: 110rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1000;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
|
|||
|
|
.download-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 缩放提示
|
|||
|
|
.scale-tip {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 100rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 10rpx 30rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
z-index: 1000;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
animation: fadeInOut 1.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeInOut {
|
|||
|
|
0% { opacity: 0; }
|
|||
|
|
15% { opacity: 1; }
|
|||
|
|
85% { opacity: 1; }
|
|||
|
|
100% { opacity: 0; }
|
|||
|
|
}
|
|||
|
|
</style>
|