實現原理
- 借助canvas畫布, 實現對上傳圖片進行裁切
- 核心方法
// context表示canvas畫布上下文對象
context.drawImage(圖片對象,裁切起始點x坐標,裁切起始點y坐標,裁切寬度,裁切高度,繪制起始點x坐標,繪制起始點y坐標,繪制寬度,繪制高度)
-
注意事項:
- 需要計算圖片原始尺寸和圖片顯示尺寸的比例
- 裁切寬度和裁切高度, 需要結合元素圖片的寬高決定, 而不是img標簽的寬高, 需要根據圖片的實際尺寸和顯示尺寸比例關系進行轉換
- 裁切起始點的坐標要根據圖片的實際尺寸和顯示尺寸之間的比例關系進行換算
實現代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.upload {
border: 1px solid #CCC;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 50px;
color: #CCC;
font-weight: normal;
cursor: pointer;
display: none;
}
.preview-wrap {
position: relative;
border: 1px solid #EEE;
height: 300px;
width: 300px;
margin: 10px 0;
cursor: move;
overflow: hidden;
display: none;
}
.preview {
position: relative;
width: 100%;
height: auto;
border: 1px solid #EEE;
transition: all 0.2s;
}
.mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
height: 160px;
z-index: 999;
cursor: move;
/* box-shadow: 0 0 0 10px rgb(0,0,0,0.5); */
box-shadow: 0 0 0 70px rgb(0 0 0 / 50%);
user-select: none;
}
.clip-preview {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
<div class="avatar">
<!-- 選擇圖片按鈕 -->
<div class="upload visible">
十
</div>
<div class="preview-wrap">
<!-- 遮罩 -->
<div class="mask"></div>
<!-- 原圖預覽 -->
<img class="preview">
</div>
<!-- 裁切結果預覽 -->
<img class="clip-preview" alt="">
<button class="reselect">重新選擇</button>
<button class="upload-btn">上傳</button>
</div>
<!-- 文件域 -->
<input type="file" accept="image/png,image/jpeg,image/gif" id="file" style="display: none;">
<script>
const file = document.querySelector('#file');
const upload = document.querySelector('.upload');
const preview = document.querySelector('.preview');
const mask = document.querySelector('.mask');
const wrap = document.querySelector('.preview-wrap');
const reselect = document.querySelector('.reselect');
const clip = document.querySelector('.clip-preview');
const uploadBtn = document.querySelector('.upload-btn');
// 裁切起始點的坐標
let clipStartX = clipStartY = 70;
// 圖片原始尺寸和顯示尺寸的比例, 默認為1:1
let scaleX = scaleY = 1;
// 裁切后的而圖片文件文件
let avatarFile;
// 根據裁切尺寸在canvas畫布中繪制圖片
function draw() {
// 創建canvas標簽
const canvas = document.createElement('canvas');
canvas.width = 160;
canvas.height = 160;
const context = canvas.getContext('2d');
// 對圖片進行裁切, 將裁切內容繪制到畫布中
context.drawImage(preview, clipStartX * scaleX, clipStartY * scaleY, 160 * scaleX, 160 * scaleY, 0, 0, 160,
160);
// 將canvas轉化為blob
canvas.toBlob((blob) => {
// console.log(URL.createObjectURL(blob));
avatarFile = new File([blob], "avatar.png", {
type: "image/png"
});
})
clip.src = canvas.toDataURL();
clip.classList.add('visible');
}
upload.addEventListener('click', function () {
file.click();
});
reselect.addEventListener('click', function () {
upload.classList.add('visible');
wrap.classList.remove('visible');
clip.classList.remove('visible');
file.click();
});
file.addEventListener('change', function () {
if (!file.files[0]) {
return false;
}
// 獲取圖片文件對象
const fileData = file.files[0];
// 創建fileReader實例
const fileReader = new FileReader();
fileReader.readAsDataURL(fileData);
fileReader.onload = function (e) {
const img = new Image();
img.src = e.target.result;
img.addEventListener('load', function () {
// 計算圖片原始尺寸和顯示尺寸之間的比例
scaleX = img.width / 300;
scaleY = img.height / 300;
// 初次繪制裁切結果
draw();
});
// 設置圖片Url
preview.src = e.target.result;
// 顯示預覽圖
wrap.classList.add('visible');
upload.classList.remove('visible');
}
});
// 鼠標按鍵狀態
let mouseState = false;
// 記錄鼠標指針起始位置
let startX = startY = 0;
// 監聽鼠標按鍵按下狀態
wrap.addEventListener('mousedown', event => {
// 更新鼠標狀態
mouseState = true;
const {
offsetX,
offsetY
} = event;
startX = offsetX;
startY = offsetY;
});
wrap.addEventListener('mousemove', event => {
const {
offsetX,
offsetY
} = event;
if (!mouseState) {
return false;
}
// 計算鼠標指針移動距離
let distanceX = offsetX - startX;
let distanceY = offsetY - startY;
// 移動圖片
if (preview.offsetLeft + distanceX < 70 && preview.offsetLeft + distanceX > -70) {
preview.style.left = (preview.offsetLeft + distanceX) + 'px';
}
if (preview.offsetTop + distanceY < 70 && preview.offsetTop + distanceY > -70) {
preview.style.top = (preview.offsetTop + distanceY) + 'px';
}
// 更新裁切起始點的坐標信息
clipStartX = 70 - preview.offsetLeft;
clipStartY = 70 - preview.offsetTop;
// 重新繪制裁切圖片
draw();
});
// 鼠標按鍵抬起, 更新鼠標按鍵狀態
document.addEventListener('mouseup', function () {
mouseState = false;
});
uploadBtn.addEventListener('click', function () {
if (!avatarFile) {
alert('請選擇圖片');
}
// 將文件對象發送給后端數據接口即可
console.log(avatarFile);
});
</script>
</body>
</html>
