前端 JS 经典：图片裁剪上传原理

前言：图片裁剪一般都是用户选择头像时用到，现在很多插件都可以满足这个功能，但是我们不仅要会用插件，还要自己懂的裁剪原理。

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" /><metaname="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" /><metaname="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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/23777.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！