1.如何實(shí)現(xiàn)圖片實(shí)現(xiàn)本地預(yù)覽
2.如何實(shí)現(xiàn)裁剪部分圖片
3.如何實(shí)現(xiàn)裁剪框拖動(dòng)
4.如何實(shí)現(xiàn)裁剪框縮放
5.如何實(shí)現(xiàn)部分土圖片轉(zhuǎn)成文件對象
<!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>頭像裁剪上傳</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; list-style-type: none; user-select: none; }
img { pointer-events: none; }
ul { width: 600px; display: flex; align-items: flex-start; margin: 20px auto; }
.test { width: 400px; height: 300px; border: 1px solid #ddd; display: flex; align-items: center; position: relative; background-color: #f2f2f2; }
.test img { width: 100%; height: auto; }
.frame { width: 60px; height: 60px; border: 1px solid blue; position: absolute; z-index: 2; top: 50%; left: 50%; cursor: all-scroll; display: none;? transform: translate(-50%, -50%); }
.avtar { margin-left: 20px; width: 96px; height: 96px; border: 1px solid #ddd; border-radius: 50%; overflow: hidden; }
.frame div { border-width: 3px; border-color: blue; position: absolute; width: 15px; height: 15px; z-index: 4; }
.l_t { cursor: nw-resize; left: -2px; top: -2px; border-top-style: solid; border-left-style: solid; }
.l_b { cursor: sw-resize; left: -2px; bottom: -2px; border-bottom-style: solid; border-left-style: solid; }
.r_t { cursor: sw-resize; right: -2px; top: -2px; border-top-style: solid; border-right-style: solid; }
.r_b { cursor: nw-resize; right: -2px; bottom: -2px; border-bottom-style: solid; border-right-style: solid; }
</style>
</head>
<body>
<input type="file" />
<ul>
?<li class="test">
?? <img class="preview" />
?? <div class="frame">
????? <div class="l_t"></div>
????? <div class="l_b"></div>
????? <div class="r_t"></div>
????? <div class="r_b"></div>
?? </div>
?</li>
? <li class="avtar">
???? <canvas></canvas>
?</li>
</ul>
<div>
?? <img src="" class="show" />
?? <button>生成裁剪圖片</button>
</div>
<script>
/**
* 實(shí)現(xiàn)頭像裁剪上傳
* 1.如何實(shí)現(xiàn)圖片實(shí)現(xiàn)本地預(yù)覽
* 2.如何實(shí)現(xiàn)部分圖片上傳
* * **/
// 輸入框
const inp = document.querySelector("input");
// 本地圖片
const test = document.querySelector(".test");
const preview = document.querySelector(".preview");
// 裁剪框
const frame = document.querySelector(".frame");
// 是否按下裁剪框 true:是
let isFrame = false;
// 裁剪后展示框
const avtar = document.querySelector(".avtar");
// 裁剪畫布
const cvs = document.querySelector("canvas");
cvs.width = avtar.offsetWidth;
cvs.height = avtar.offsetHeight;
const ctx = cvs.getContext("2d");
// 監(jiān)聽選擇圖片
inp.onchange = function (ev) {
??? const file = ev.target.files[0];
??? ev.target.value = "";?
?? frame.style.display = "block";
??? // 將 file 轉(zhuǎn)為 blob 路徑地址
??? let blobURL = URL.createObjectURL(file);
???? // 本地預(yù)覽選擇的圖片
???? preview.src = blobURL;
};
// 裁剪對象?
let imgInfo = {
// 裁剪圖片的 x 坐標(biāo)倔矾，從圖片的哪個(gè)橫坐標(biāo)開始裁剪
x: frame.offsetLeft,
// 裁剪圖片的 y 坐標(biāo)，從圖片的哪個(gè)縱坐標(biāo)開始裁剪
y: frame.offsetTop,
// 裁剪的寬度
cutW: frame.offsetWidth,
// 裁剪的高度
cutH: frame.offsetHeight,
// 剪裁之后展示的寬度尾菇，縮小或放大
w: avtar.offsetWidth,
// 剪裁之后展示的高度，縮小或放大
h: avtar.offsetHeight,
};
frame.onmousedown = function (ev) {????
??? ev.preventDefault();
???? ev.stopPropagation();
???? isFrame = true;
???? // 瀏覽器可視區(qū)域左側(cè)和上側(cè)為起始點(diǎn)
???? const { x, y } = ev;
???? // 當(dāng)前左邊距（已test左側(cè)為起始點(diǎn)）
????? const l = frame.offsetLeft;
???? // 當(dāng)前上邊距（已test上側(cè)為起始點(diǎn)）
????? const t = frame.offsetTop;
// 當(dāng)前裁剪框?qū)挾?/p>
const w = frame.offsetWidth;
// 當(dāng)前裁剪框高度
const h = frame.offsetHeight;
// 最大移動(dòng)寬度
const maxL = test.offsetWidth - frame.offsetWidth / 2;
const minL = frame.offsetWidth / 2;
const hh = (test.offsetHeight - preview.offsetHeight) / 2;
// 最大移動(dòng)高度
const maxT = test.offsetHeight - hh - frame.offsetHeight / 2;
const minT = hh + frame.offsetHeight / 2;
document.onmousemove = function (e) {
if (!isFrame) return;
// 瀏覽器可視區(qū)域左側(cè)和上側(cè)為起始點(diǎn)
const { x: dx, y: dy } = e;
let left = dx - x + l;
let top = dy - y + t;
frame.style.left = `${ left <= minL ? minL : left >= maxL ? maxL : left }px`;
frame.style.top = `${ top <= minT ? minT : top >= maxT ? maxT : top }px`;
draw();
};
document.onmouseup = function (e) {
isFrame = false;
document.onmousemove = null;
document.onmouseup = null;
};
};
// 裁剪圖片生成裁剪文件對象
function draw() {
// 最終裁剪x坐標(biāo)
const hh = (test.offsetHeight - preview.offsetHeight) / 2;
const absx = frame.offsetLeft - frame.offsetWidth / 2;
const absy = frame.offsetTop - frame.offsetHeight / 2 - hh;
imgInfo.x = (absx / preview.offsetWidth) * preview.naturalWidth;
// 最終裁剪y坐標(biāo)
imgInfo.y = (absy / preview.offsetHeight) * preview.naturalHeight;
// 最終裁剪寬度
imgInfo.cutW = (frame.offsetWidth / preview.offsetWidth) * preview.naturalWidth;
// 最終裁剪高度
imgInfo.cutH = (frame.offsetHeight / preview.offsetHeight) * preview.naturalHeight;
ctx.drawImage( preview, imgInfo.x, imgInfo.y, imgInfo.cutW, imgInfo.cutH, 0, 0, imgInfo.w, imgInfo.h );
}
const btn = document.querySelector("button");
btn.onclick = function () {
const show = document.querySelector(".show");
cvs.toBlob((blod) => {
// 裁剪之后的文件對象均牢，可供上傳
const file = new File([blod], "test.jpg", { type: "image/jepg" });
console.log(file);
show.src = URL.createObjectURL(file);
});
};
const l_t = document.querySelector(".l_t");
const l_b = document.querySelector(".l_b");
const r_t = document.querySelector(".r_t");
const r_b = document.querySelector(".r_b");
// 是否進(jìn)行縮放
let iSalce = false;
// 左上角縮放
l_t.onmousedown = Scale("lt"); // 左下角縮放
l_b.onmousedown = Scale("lb"); // 右上角縮放
r_t.onmousedown = Scale("rt"); // 右下角縮放
r_b.onmousedown = Scale("rb");
// 方向縮放函數(shù) direction：方向
function Scale(direction) {
return function (e) {
iSalce = true;
isFrame = false;
e.preventDefault();
e.stopPropagation();
const { x } = e;
const left = frame.offsetLeft;
const top = frame.offsetTop;
const w = frame.offsetWidth;
const h = frame.offsetHeight;
const hh = (test.offsetHeight - preview.offsetHeight) / 2;
// 最大縮放長度
let maxv = 0;
// 最小縮放長度
let minv = 40 - h;
// 左上
if (direction == "lt") {
const maxH = frame.offsetTop - frame.offsetHeight / 2 - hh;
const maxW = frame.offsetLeft - frame.offsetWidth / 2;
maxv = Math.min(maxH, maxW);
}
// 左下
if (direction == "lb") {
const maxH = test.offsetHeight - frame.offsetTop - frame.offsetHeight / 2 - hh;
const maxW = frame.offsetLeft - frame.offsetWidth / 2;
maxv = Math.min(maxH, maxW);
}
// 右上
if (direction == "rt") {
const maxH = frame.offsetTop - frame.offsetHeight / 2 - hh;
const maxW = test.offsetWidth - frame.offsetLeft - frame.offsetWidth / 2;
maxv = Math.min(maxH, maxW);
}
// 右下
if (direction == "rb") {
const maxH = test.offsetHeight - frame.offsetTop - frame.offsetHeight / 2 - hh;
const maxW = test.offsetWidth - frame.offsetLeft - frame.offsetWidth / 2;
maxv = Math.min(maxH, maxW);
}
document.onmousemove = function (ev) {
if (!iSalce) return;
let absx = direction == "rt" || direction == "rb" ? ev.x - x : x - ev.x;
absx = absx >= maxv ? maxv : absx >= minv ? absx : minv;
frame.style.width = `${w + absx}px`;
frame.style.height = `${h + absx}px`;
// 左上
if (direction == "lt") {
frame.style.left = `${left - absx / 2}px`;
frame.style.top = `${top - absx / 2}px`;
}
// 右上
if (direction == "rt") {
frame.style.left = `${left + absx / 2}px`;
frame.style.top = `${top - absx / 2}px`;
}
// 左下
if (direction == "lb") {
frame.style.left = `${left - absx / 2}px`;
frame.style.top = `${top + absx / 2}px`;
}
// 右下
if (direction == "rb") {
frame.style.left = `${left + absx / 2}px`;
frame.style.top = `${top + absx / 2}px`;
}
draw();
};
document.onmouseup = function () {
isFrame = false;
document.onmousemove = null;
document.onmouseup = null;
};
};
}
</script>
</body>
</html>
