功能
允许用户上传图片，并在图片周围添加透明边距。用户可以调整边距的大小，然后将修改后的图片下载为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;};// 读取文件内容为DataURLreader.readAsDataURL(file);});function drawImage(image) {if (!image) {return}const canvasWidth = image.width + + margin.left + margin.rightconst canvasHeight = image.height + margin.top + margin.bottomcanvas.width = canvasWidthcanvas.height = canvasHeightconsole.log(canvasWidth, canvasHeight)console.log(image.width, image.height)console.log(margin)// 清空Canvasctx.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数据URLconst 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>