原生图片大小编辑
创建html文件-复制代码到html文件-浏览器打卡html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片实际尺寸修改 & 压缩</title>
<style>
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.btn {
margin: 10px 0;
padding: 8px 16px;
background: #0078d7;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
}
#preview {
margin-top: 20px;
max-width: 100%;
border: 1px solid #eee;
}
.param-set {
margin: 10px 0;
}
label {
display: inline-block;
width: 120px;
}
input {
padding: 4px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<!-- 1. 选择本地图片 -->
<input style="width: 100%;" type="file" id="fileInput" accept="image/*">
<!-- 2. 设置目标参数：尺寸/压缩质量 -->
<div class="param-set">
<label>目标宽度(px)：</label>
<input type="number" id="targetWidth" value="400" placeholder="如400">
<label>目标高度(px)：</label>
<input type="number" id="targetHeight" value="400" placeholder="如400">
<label>压缩质量(0-1)：</label>
<input type="number" id="quality" step="0.1" value="0.6" placeholder="如0.6">
<label>导出格式：</label>
<select id="formatSelect">
<option value="jpeg">JPEG (.jpg/.jpeg)</option>
<option value="png">PNG (.png)</option>
</select>
</div>
<!-- 3. 操作按钮 -->
<button class="btn" id="processBtn" disabled>处理图片</button>
<button class="btn" id="downloadBtn" disabled>下载处理后的图片</button>
<!-- 4. 预览处理后的图片 -->
<div>处理后预览：</div>
<img id="preview" alt="预览图">
</div>
<script>
// 获取DOM元素
const fileInput = document.getElementById('fileInput');
const processBtn = document.getElementById('processBtn');
const downloadBtn = document.getElementById('downloadBtn');
const preview = document.getElementById('preview');
preview.style.display = 'none';
const targetWidth = document.getElementById('targetWidth');
const targetHeight = document.getElementById('targetHeight');
const quality = document.getElementById('quality');
const formatSelect = document.getElementById('formatSelect');
let processedBlob = null; // 存储处理后的图片Blob（用于下载）
let currentFormat = 'jpeg'; // 默认格式
formatSelect.addEventListener('change', (e) => {
currentFormat = e.target.value;
console.log('当前格式：', currentFormat);
});
// 1. 选择图片后启用处理按钮
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
processBtn.disabled = false;
}
});
// 2. 核心：整体缩小图片（完整画面，等比例）
processBtn.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) return;
// 读取原图并转为Image对象
const img = await loadImage(file);
// 创建Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 计算等比例缩放后的尺寸（核心：只改宽度，高度自动适配，完整保留画面）
const originalWidth = img.width;
const originalHeight = img.height;
const newWidth = Number(targetWidth.value) || 400;
const newHeight = (originalHeight / originalWidth) * newWidth; // 等比例计算高度
// 设置Canvas尺寸为缩放后的尺寸
canvas.width = newWidth;
canvas.height = newHeight;
// 绘制图片：完整缩放，不裁剪（这一步是关键！）
ctx.drawImage(
img,
0, 0, originalWidth, originalHeight, // 原图完整区域
0, 0, newWidth, newHeight // Canvas完整区域（缩放后）
);
// 导出为Blob（压缩体积）
canvas.toBlob((blob) => {
processedBlob = blob;
// 预览缩小后的完整图片
const previewUrl = URL.createObjectURL(blob);
preview.src = previewUrl;
preview.style.display = 'block';
downloadBtn.disabled = false;
// 打印大小对比（验证）
console.log('处理前：', (file.size / 1024).toFixed(2), 'KB');
console.log('处理后：', (blob.size / 1024).toFixed(2), 'KB');
console.log('缩放后尺寸：', newWidth + 'x' + newHeight);
}, currentFormat == 'png' ? 'image/png' : 'image/jpeg', Number(quality.value) || 0.6);
});
// 3. 下载处理后的图片
downloadBtn.addEventListener('click', () => {
if (!processedBlob) return;
const url = URL.createObjectURL(processedBlob);
const a = document.createElement('a');
a.href = url;
a.download = `processed-${Date.now()}.${currentFormat}`; // 下载文件名
a.click();
// 释放URL资源
URL.revokeObjectURL(url);
});
// 辅助函数：读取文件并转为Image对象
function loadImage(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => resolve(img);
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
}
</script>
</body>
</html>