上传图片修改透明边距并下载下来
功能
允许用户上传图片，并在图片周围添加透明边距。用户可以调整边距的大小，然后将修改后的图片下载为PNG格式。
思路
- HTML结构：包含一个画布（Canvas）用于显示图片，以及一些输入框和按钮用于调整边距和下载图片。
- CSS样式：定义了页面的基本布局和样式，使页面居中显示，并设置了画布的大小和边框。
- JavaScript功能：
- 处理图片上传。
- 允许用户调整图片周围的边距。
- 将修改后的图片绘制到画布上。
- 提供下载修改后图片的功能。
实现
HTML结构
添加
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片修改透明边距</title>
<style>
body {
text-align: center;
}
.main {
display: inline-block;
text-align: left;
}
#myCanvas {
width: 256px;
height: 256px;
object-fit: contain;
outline: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="main">
<canvas id="myCanvas" width="400" height="400"></canvas>
<br>
左边距：<input type="number" placeholder="10" onchange="margin.left = Number(this.value);drawImage(IMAGE)"> px
<br>
上边距：<input type="number" placeholder="10" onchange="margin.top = Number(this.value);drawImage(IMAGE)"> px
<br>
右边距：<input type="number" placeholder="10" onchange="margin.right = Number(this.value);drawImage(IMAGE)"> px
<br>
下边距：<input type="number" placeholder="10" onchange="margin.bottom = Number(this.value);drawImage(IMAGE)"> px
<br>
<input type="file" id="imageUpload" accept="image/*" />
<br>
<button id="downloadButton">下载PNG</button>
</div>
</body>
</html>
JavaScript
获取canvas元素和canvas渲染上下文，添加边距图片变量，文件上传输入框添加change事件，使用fileReader获取图片，根据获取到的图片大小和边距大小计算出canvas大小并设置，下载按钮添加点击事件
<script>
// 获取Canvas元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 边距
const margin = {
left: 10,
top: 10,
right: 10,
bottom: 10
};
let IMAGE = null;
// 获取文件上传输入框
const imageUpload = document.getElementById('imageUpload');
// 监听文件上传事件
imageUpload.addEventListener('change', function(event) {
// 获取用户选择的文件
const file = event.target.files[0];
// 检查是否选择了文件
if (!file) {
alert('未选择文件！');
return;
}
// 检查文件类型是否为图片
if (!file.type.startsWith('image/')) {
alert('请选择图片文件！');
return;
}
// 使用FileReader读取图片文件
const reader = new FileReader();
reader.onload = function(e) {
// 创建一个Image对象
const image = new Image();
IMAGE = image;
// 设置图片加载完成后的回调函数
image.onload = function() {
drawImage(image)
};
// 设置图片的源为FileReader读取的结果
image.src = e.target.result;
};
// 读取文件内容为DataURL
reader.readAsDataURL(file);
});
function drawImage(image) {
if (!image) {
return
}
const canvasWidth = image.width + + margin.left + margin.right
const canvasHeight = image.height + margin.top + margin.bottom
canvas.width = canvasWidth
canvas.height = canvasHeight
console.log(canvasWidth, canvasHeight)
console.log(image.width, image.height)
console.log(margin)
// 清空Canvas
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// 绘制图片到Canvas上
ctx.drawImage(image, margin.left, margin.top, image.width, image.height);
}
// 添加按钮点击事件
document.getElementById('downloadButton').addEventListener('click', function() {
if (!IMAGE) {
alert('请先选择图片！')
return
}
drawImage(IMAGE)
// 将Canvas内容转换为PNG数据URL
const dataURL = canvas.toDataURL('image/png');
// 创建一个a元素用于下载
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas_image.png'; // 设置下载文件名
document.body.appendChild(link);
// 模拟点击a元素以触发下载
link.click();
// 清理
document.body.removeChild(link);
});
</script>
浙公网安备 33010602011771号