add

src/App.css

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

src/App.tsx

@@ -9,6 +9,7 @@ type ImageWatermarkProps = {
   opacity?: number;
   spacing?: number;
   isOrigin?: boolean;
+  scaleSize?: number;
 };
 const ImageWatermark = ({
   file,
@@ -18,6 +19,7 @@ const ImageWatermark = ({
   opacity = 0.2,
   spacing = 50,
   isOrigin = false,
+  scaleSize = 1200,
 }: ImageWatermarkProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imgRef = useRef(new Image());
@@ -34,7 +36,7 @@ const ImageWatermark = ({
       // 获取设备像素比
       const devicePixelRatio = 1;
 
-      const width = isOrigin ? img.width : 1200;
+      const width = isOrigin ? img.width : scaleSize;
       const height = isOrigin ? img.height : (img.height / img.width) * width;
 
       // 设置canvas的物理像素尺寸
@@ -136,12 +138,18 @@ 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>) => {
@@ -150,16 +158,7 @@ function App() {
 
   return (
     <div className="App">
-      <div
-        style={{
-          padding: 16,
-          gap: 10,
-          display: "grid",
-          gridTemplate: "'a b' / auto 1fr",
-          alignItems: "flex-start",
-          justifyItems: "flex-start",
-        }}
-      >
+      <div className="tools">
         <label htmlFor="file">文件</label>
         <input
           type="file"
@@ -219,6 +218,22 @@ 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) => (
@@ -231,6 +246,7 @@ function App() {
           key={file.name}
           text={keyword}
           isOrigin={isOrigin}
+          scaleSize={scaleSize}
         />
       ))}
     </div>