当前位置：首页 > article >正文

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

article 2025/2/13 23:59:59

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">
                    <input
                    type="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>