mjpic 1.0.20 → 1.0.21

package/src/store/useImageStore.ts

@@ -73,6 +73,82 @@ interface ImageState {
   reset: () => void;
 }
 
+const sanitizeTransparentEdges = (canvas: HTMLCanvasElement) => {
+  const ctx = canvas.getContext('2d', { willReadFrequently: true } as any) as CanvasRenderingContext2D | null;
+  if (!ctx) return;
+
+  const { width, height } = canvas;
+  if (width <= 1 || height <= 1) return;
+
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const { data } = imageData;
+
+  const isRowTransparent = (y: number) => {
+    for (let x = 0; x < width; x += 1) {
+      if (data[(y * width + x) * 4 + 3] !== 0) return false;
+    }
+    return true;
+  };
+
+  const isColumnTransparent = (x: number) => {
+    for (let y = 0; y < height; y += 1) {
+      if (data[(y * width + x) * 4 + 3] !== 0) return false;
+    }
+    return true;
+  };
+
+  const copyRow = (fromY: number, toY: number) => {
+    for (let x = 0; x < width; x += 1) {
+      const from = (fromY * width + x) * 4;
+      const to = (toY * width + x) * 4;
+      data[to] = data[from];
+      data[to + 1] = data[from + 1];
+      data[to + 2] = data[from + 2];
+      data[to + 3] = data[from + 3];
+    }
+  };
+
+  const copyColumn = (fromX: number, toX: number) => {
+    for (let y = 0; y < height; y += 1) {
+      const from = (y * width + fromX) * 4;
+      const to = (y * width + toX) * 4;
+      data[to] = data[from];
+      data[to + 1] = data[from + 1];
+      data[to + 2] = data[from + 2];
+      data[to + 3] = data[from + 3];
+    }
+  };
+
+  let top = 0;
+  while (top < height && isRowTransparent(top)) top += 1;
+
+  let bottom = height - 1;
+  while (bottom >= 0 && isRowTransparent(bottom)) bottom -= 1;
+
+  let left = 0;
+  while (left < width && isColumnTransparent(left)) left += 1;
+
+  let right = width - 1;
+  while (right >= 0 && isColumnTransparent(right)) right -= 1;
+
+  if (top >= height || bottom < 0 || left >= width || right < 0) return;
+
+  for (let y = 0; y < top; y += 1) {
+    copyRow(top, y);
+  }
+  for (let y = bottom + 1; y < height; y += 1) {
+    copyRow(bottom, y);
+  }
+  for (let x = 0; x < left; x += 1) {
+    copyColumn(left, x);
+  }
+  for (let x = right + 1; x < width; x += 1) {
+    copyColumn(right, x);
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+};
+
 const defaultConfig: ImageConfig = {
   rotation: 0,
   scale: 1,
@@ -225,6 +301,7 @@ export const useImageStore = create<ImageState>((set, get) => ({
         }
 
         ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+        sanitizeTransparentEdges(canvas);
         
         const croppedImage = canvas.toDataURL('image/png');