前言：图片裁剪一般都是用户选择头像时用到，现在很多插件都可以满足这个功能，但是我们不仅要会用插件，还要自己懂的裁剪原理。
1. 流程
流程分为：1. 预览本地图片 2. 选择裁剪区域 3. 上传裁剪图像
2. 如何预览图片
通过 FileReader 构造函数，将本地的图片，转换成 base64 的地址，不通过网络请求，直接预览。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
.preview {
width: 500px;
height: 500px;
margin: 0 auto;
object-fit: cover;
}
</style>
</head>
<body>
<input type="file" />
<img class="preview" />
<script>
const inp = document.querySelector("input");
const img = document.querySelector("img");
inp.onchange = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
img.src = reader.result;
};
};
</script>
</body>
</html>3. 上传裁剪后图片
实现思路：上传图片本质是上传文件，我们需要得到一个文件 file 对象，怎么拿到 file 对象呢，通过 canvas 画出裁剪图然后导出为 blob 对象，然后将 blob 对象转为 file 对象我们就可以进行上传了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
.preview {
width: 500px;
height: 500px;
margin: 0 auto;
object-fit: cover;
}
</style>
</head>
<body>
<input type="file" />
<img class="preview" />
<button>点击上传裁剪图</button>
<script>
const inp = document.querySelector("input");
const img = document.querySelector("img");
const btn = document.querySelector("button");
inp.onchange = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
img.src = reader.result;
};
};
function uploadResult({ cutWidth, cutHeight, cutX, cutY }) {
const cvs = document.createElement("canvas");
const ctx = cvs.getContext("2d");
cvs.width = 200;
cvs.height = 200;
ctx.drawImage(
img,
cutX,
cutY,
cutWidth,
cutHeight,
0,
0,
cvs.width,
cvs.height
);
document.body.appendChild(cvs);
cvs.toBlob((blob) => {
const file = new File([blob], "cut.png", { type: "image/png" });
// 上传 file 对象
console.log(file);
});
}
btn.onclick = () => {
uploadResult({
cutWidth: 100,
cutHeight: 100,
cutX: 250,
cutY: 250,
});
};
</script>
</body>
</html>
