src/App.css

@@ -37,12 +37,6 @@
   }
 }
 
-:not(input[type="color"]) {
-}
-
-.tools {
-  padding: 16px;
-  gap: 16px;
-  display: grid;
-  grid-template: "a b" / auto 1fr;
+input {
+  width: 100%;
 }

src/App.tsx

@@ -9,7 +9,6 @@ type ImageWatermarkProps = {
   opacity?: number;
   spacing?: number;
   isOrigin?: boolean;
-  scaleSize?: number;
 };
 const ImageWatermark = ({
   file,
@@ -19,7 +18,6 @@ const ImageWatermark = ({
   opacity = 0.2,
   spacing = 50,
   isOrigin = false,
-  scaleSize = 1200,
 }: ImageWatermarkProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imgRef = useRef(new Image());
@@ -36,7 +34,7 @@ const ImageWatermark = ({
       // 获取设备像素比
       const devicePixelRatio = 1;
 
-      const width = isOrigin ? img.width : scaleSize;
+      const width = isOrigin ? img.width : 1200;
       const height = isOrigin ? img.height : (img.height / img.width) * width;
 
       // 设置canvas的物理像素尺寸
@@ -97,16 +95,9 @@ const ImageWatermark = ({
     if (confirm("确定下载图片？")) {
       const canvas = canvasRef.current!;
       const a = document.createElement("a");
-      canvas.toBlob((blob) => {
-        if (blob) {
-          a.href = URL.createObjectURL(blob);
-          a.download = file.name;
-          a.click();
-          setTimeout(() => {
-            URL.revokeObjectURL(a.href);
-          }, 1000 * 60);
-        }
-      });
+      a.href = canvas.toDataURL("image/png");
+      a.download = file.name;
+      a.click();
     }
   };
 
@@ -145,18 +136,12 @@ function App() {
     localStorage.getItem("isOrigin") === "true"
   );
 
-  const [scaleSize, setScaleSize] = useState(
-    Number(localStorage.getItem("scaleSize")) || 1200
-  );
-
   useEffect(() => {
     localStorage.setItem("keyword", keyword);
     localStorage.setItem("fontSize", String(fontSize));
     localStorage.setItem("fontColor", fontColor);
     localStorage.setItem("opacity", String(opacity));
     localStorage.setItem("spacing", String(spacing));
-    localStorage.setItem("isOrigin", String(isOrigin));
-    localStorage.setItem("scaleSize", String(scaleSize));
   }, [keyword, fontSize, fontColor, opacity, spacing]);
 
   const onSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -165,7 +150,16 @@ function App() {
 
   return (
     <div className="App">
-      <div className="tools">
+      <div
+        style={{
+          padding: 16,
+          gap: 10,
+          display: "grid",
+          gridTemplate: "'a b' / auto 1fr",
+          alignItems: "flex-start",
+          justifyItems: "flex-start",
+        }}
+      >
         <label htmlFor="file">文件</label>
         <input
           type="file"
@@ -225,22 +219,6 @@ function App() {
           checked={isOrigin}
           onChange={(e) => setIsOrigin(e.target.checked)}
         />
-        {!isOrigin ? (
-          <>
-            <label htmlFor="scaleSize">图片尺寸</label>
-            <select
-              value={scaleSize}
-              onChange={(e) => setScaleSize(Number(e.target.value))}
-            >
-              <option value="1920">1920</option>
-              <option value="1440">1440</option>
-              <option value="1200">1200</option>
-              <option value="1000">1000</option>
-              <option value="800">800</option>
-              <option value="600">600</option>
-            </select>
-          </>
-        ) : null}
       </div>
 
       {files.map((file) => (
@@ -253,7 +231,6 @@ function App() {
           key={file.name}
           text={keyword}
           isOrigin={isOrigin}
-          scaleSize={scaleSize}
         />
       ))}
     </div>