【前端开发】微信裁剪图片上传

Cropper.js：一款基于 JavaScript 的开源图片裁剪神器，支持图片裁剪、缩放、旋转

HTML页面引用：
css：<link rel="stylesheet" type="text/css" href="css/cropper.css" />
js：<script type="text/javascript"src="js/cropper.js" charset="utf-8"></script>

<!DOCTYPE html>
<html lang="en" style="font-size: 50px">
<head><meta charset="UTF-8"><title>裁剪相片上传</title><link rel="stylesheet" type="text/css" href="css/cropper.css" /><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
</head>
<body><div class="wrapper"><div class="uploadtop"><div class="imgdiv"><div class="add"><inputtype="file"name="fileInput"id="fileInput"accept="image/*"class="hidden-input"/><img src="./img/photoCollection/upload.png" alt=""><span>拍照</span></div><img id="image"></div></div><div class="btn-box"><div class="next uploadbtn">上传相片</div></div></div><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript"src="js/cropper.js" charset="utf-8"></script><script>// 上传图片对象let uploadFile = {};var imageArr = "";let cropperInstance = null;var ImgCutH = "";var ImgCutW = "";var ImgCutX = 0;var ImgCutY = 0;$("#fileInput").on("change", handleFileChange);// 获取文件上传对象function handleFileChange(event) {uploadFile = event.target.files[0];var fileSuffix = uploadFile.name.substr(uploadFile.name.indexOf("."));//判断图片上传的格式if (!/\.(jpg|JPG)$/.test(fileSuffix)) {weui.alert("请上传格式为jpg的图片！");return;}var reader = new FileReader();reader.readAsDataURL(uploadFile);reader.onload = function () {imageArr = reader.result;$("#image").cropper("destroy") // 销毁旧的裁剪区域.attr("src", imageArr) // 重新设置图片路径.cropper({aspectRatio: 3 / 4,viewMode: 1,dragMode: "move",rotatable: false,movable: true, //是否允许可以移动后面的图片checkCrossOrigin: false,// preview:small,center: true, //裁剪框在图片是否居中crop: function (e) {ImgCutH = parseInt(e.detail.height);ImgCutW = parseInt(e.detail.width);ImgCutX = parseInt(e.detail.x);ImgCutY = parseInt(e.detail.y);},});// 保存 cropper 实例cropperInstance = $("#image").data("cropper");};}// 提交文件$(".uploadbtn").on("click", function () {if (imageArr == "") {weui.alert("请选择图片！");} else {// 获取裁剪后的图片为 Blob 格式const croppedCanvas = cropperInstance.getCroppedCanvas().toBlob((croppedBlob) => {// 将裁剪后的图片 Blob 对象转为文件const croppedFile = new File([croppedBlob], uploadFile.name, {type: uploadFile.type,lastModified: new Date().getTime(),});uploadFile = croppedFile;// 上传裁剪后的图片uploadImageFile();}, "image/jpeg");}});// 上传到服务器function uploadImageFile(callback) {var formData = new FormData();formData.append("file", uploadFile);$.ajax({url: handlerURL,type: "post",data: formData,processData: false,contentType: false,dataType: "json",success: function (req) {if (req.Status) {imageArr = req.Data;callback();}},error: function (statusText) {console.error(statusText);},});}</script>
</body>
</html>