85 lines
2.9 KiB
Plaintext
85 lines
2.9 KiB
Plaintext
<!--index.wxml-->
|
||
<navigation-bar title="图片压缩工具" back="{{false}}" color="black" background="#FFF"></navigation-bar>
|
||
<scroll-view class="scrollarea" scroll-y type="list">
|
||
<view class="container">
|
||
<!-- 选择图片区域 -->
|
||
<view class="section">
|
||
<view class="section-title">选择图片</view>
|
||
<view class="image-picker" bindtap="chooseImage">
|
||
<image wx:if="{{originalImage}}" src="{{originalImage}}" mode="aspectFit" class="preview-image"></image>
|
||
<view wx:else class="placeholder">
|
||
<text class="placeholder-text">点击选择图片</text>
|
||
</view>
|
||
</view>
|
||
<view wx:if="{{originalImage}}" class="image-info">
|
||
<text>原始尺寸: {{originalWidth}} × {{originalHeight}}</text>
|
||
<text>原始大小: {{originalSize}} KB</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 压缩设置区域 -->
|
||
<view wx:if="{{originalImage}}" class="section">
|
||
<view class="section-title">压缩设置</view>
|
||
|
||
<view class="setting-item">
|
||
<text class="setting-label">压缩比例: {{(quality * 100)}}%</text>
|
||
<slider
|
||
class="setting-slider"
|
||
min="10"
|
||
max="100"
|
||
value="{{quality * 100}}"
|
||
bindchange="onQualityChange"
|
||
activeColor="#07C160"
|
||
/>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<text class="setting-label">目标宽度 可以填0为原始宽高</text>
|
||
<input
|
||
class="setting-input"
|
||
type="number"
|
||
value="{{targetWidth}}"
|
||
bindinput="onWidthChange"
|
||
placeholder="输入宽度"
|
||
/>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<text class="setting-label">目标高度 可以填0为原始宽高</text>
|
||
<input
|
||
class="setting-input"
|
||
type="number"
|
||
value="{{targetHeight}}"
|
||
bindinput="onHeightChange"
|
||
placeholder="输入高度"
|
||
/>
|
||
</view>
|
||
|
||
<button
|
||
class="compress-btn"
|
||
type="primary"
|
||
bindtap="compressImage"
|
||
loading="{{compressing}}"
|
||
disabled="{{compressing}}"
|
||
>
|
||
{{compressing ? '压缩中...' : '开始压缩'}}
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 压缩结果区域 -->
|
||
<view wx:if="{{showResult}}" class="section">
|
||
<view class="section-title">压缩结果</view>
|
||
<view class="result-container">
|
||
<view class="result-image">
|
||
<image src="{{compressedImage}}" mode="aspectFit" class="preview-image"></image>
|
||
</view>
|
||
<view class="result-info">
|
||
<text>压缩后大小: {{compressedSize}} KB</text>
|
||
<text>压缩率: {{((1 - compressedSize/originalSize) * 100)}}%</text>
|
||
<button class="save-btn" type="default" bindtap="saveImageToAlbum">保存到相册</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|