feat: add zjc clipper

libmw · libmw · commit b4fee0468762 · 2024-10-09T16:04:18.000+08:00
diff --git a/_posts/2024-10-09-zjc-clipper.md b/_posts/2024-10-09-zjc-clipper.md
@@ -0,0 +1,43 @@
+---
+  layout: pure
+  title: 珠江城小学学籍照片裁剪
+---
+
+<style>
+body {
+        font-size: 16px;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        text-align: center;
+      }
+      img {
+        max-width: 100%;
+      }
+      #cropper {
+        margin-top: 10px;
+      }
+</style>
+<link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css"
+    />
+  <div class="container">
+      <div class="btns">
+        <input type="file" id="inputImage" accept="image/*" />
+        <button id="exportBtn">导出图片</button>
+      </div>
+      <!-- <div class="btns">
+        <input id="unsharpAmount" value="160" />
+        <input id="unsharpThreshold" value="0.1" />
+      </div> -->
+      <br />
+      <img id="image" src="" style="display: none" />
+      <div id="cropper"></div>
+      <br />
+    </div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.0.0/html2canvas.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pica/7.0.0/pica.min.js"></script>
+<script src="/resource/2024/2024-10-09-zjc-clipper-app.js"></script>
diff --git a/resource/2021/1117_gps.js b/resource/2021/1117_gps.js
@@ -106,7 +106,6 @@ var pageControl = {
     //this.changeMapTo('baidu');
     //点击地图显示坐标
     map.on("click", this.onMapClick);
-
   },
   generateMarker: function (pictureDetail, imgSrc) {
     const { lon, lat } = this.getPointByPictureDetail(pictureDetail);
diff --git a/resource/2024/2024-10-09-zjc-clipper-app.js b/resource/2024/2024-10-09-zjc-clipper-app.js
@@ -0,0 +1,97 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const inputImage = document.getElementById("inputImage");
+  const image = document.getElementById("image");
+  const cropper = document.getElementById("cropper");
+  const exportBtn = document.getElementById("exportBtn");
+
+  let cropperInstance;
+
+  inputImage.addEventListener("change", (e) => {
+    const files = e.target.files;
+    const done = (url) => {
+      inputImage.value = "";
+      image.src = url;
+      image.style.display = "block";
+
+      if (cropperInstance) {
+        cropperInstance.destroy();
+      }
+
+      cropperInstance = new Cropper(image, {
+        aspectRatio: 3 / 4,
+        viewMode: 1,
+        dragMode: "move",
+      });
+    };
+
+    const reader = new FileReader();
+    reader.onload = (e) => done(reader.result);
+    reader.readAsDataURL(files[0]);
+  });
+
+  exportBtn.addEventListener("click", () => {
+    const canvas = cropperInstance.getCroppedCanvas({
+      width: 150,
+      height: 200,
+    });
+
+    canvas.toBlob(
+      (blob) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const imgData = e.target.result;
+
+          // Compress image using pica library
+          const targetCanvas = document.createElement("canvas");
+          targetCanvas.width = 150;
+          targetCanvas.height = 200;
+
+          const picaImg = pica();
+          const unsharpAmount =
+            +document.getElementById("unsharpAmount")?.value || 0;
+          const unsharpThreshold =
+            +document.getElementById("unsharpThreshold")?.value || 0;
+          console.log(unsharpAmount, unsharpThreshold);
+          picaImg
+            .resize(canvas, targetCanvas, {
+              unsharpAmount: unsharpAmount,
+              unsharpThreshold: unsharpThreshold,
+            })
+            .then((result) => {
+              const compressedBlob = dataURLtoBlob(
+                targetCanvas.toDataURL("image/jpeg"),
+                "image/jpeg"
+              );
+
+              // Ensure size is below 64KB
+              if (compressedBlob.size <= 64 * 1024) {
+                // Create a download link
+                const link = document.createElement("a");
+                link.href = URL.createObjectURL(compressedBlob);
+                link.download = "cropped-image.jpg";
+                link.click();
+              } else {
+                alert(
+                  "Compressed image size is still above 64KB. Please try again."
+                );
+              }
+            })
+            .catch((err) => console.error(err));
+        };
+        reader.readAsDataURL(blob);
+      },
+      "image/jpeg",
+      0.9
+    ); // Adjust quality here, 0.7 is 70% quality
+  });
+
+  function dataURLtoBlob(dataUrl, mimeType) {
+    const byteString = atob(dataUrl.split(",")[1]);
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], { type: mimeType });
+  }
+});
