功能
允許用户上傳圖片，並在圖片周圍添加透明邊距。用户可以調整邊距的大小，然後將修改後的圖片下載為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>
