✨ スクリーンショットをjpgで保存できるように

Author: ci7lus

src/atoms/settings.ts

@@ -44,6 +44,7 @@ export const screenshotSetting = atom<ScreenshotSetting>({
   default: {
     saveAsAFile: true,
     includeSubtitle: true,
+    keepQuality: true,
   },
 })
 

src/components/contentPlayer/VideoPlayer.tsx

@@ -191,7 +191,11 @@ export const CoiledVideoPlayer: React.VFC<{}> = memo(() => {
           )
         }
         const blob = await new Promise<Blob | null>((res) =>
-          contentCanvas.toBlob((blob) => res(blob), "image/png", 1)
+          contentCanvas.toBlob(
+            (blob) => res(blob),
+            screenshot.keepQuality ? "image/png" : "image/jpeg",
+            screenshot.keepQuality ? 1 : 0.95
+          )
         )
         if (!blob) throw new Error("blob")
         const buffer = await blob.arrayBuffer()
@@ -217,7 +221,9 @@ export const CoiledVideoPlayer: React.VFC<{}> = memo(() => {
             ]
               .filter((s) => s)
               .join("_")
-            const fileName = `${baseName}.png`
+            const fileName = `${baseName}.${
+              screenshot.keepQuality ? "png" : "jpg"
+            }`
             const filePath = path.join(screenshot.basePath, fileName)
             await window.Preload.public.writeFile({
               path: filePath,

src/components/settings/general/Screenshot.tsx

@@ -13,16 +13,31 @@ export const ScreenshotSettingForm: React.VFC<{
     screenshotSetting.includeSubtitle
   )
   const [basePath, setBasePath] = useState(screenshotSetting.basePath)
+  const [keepQuality, setKeepQuality] = useState(screenshotSetting.keepQuality)
   useDebounce(
     () => {
-      setScreenshotSetting({ saveAsAFile, basePath, includeSubtitle })
+      setScreenshotSetting({
+        saveAsAFile,
+        basePath,
+        includeSubtitle,
+        keepQuality,
+      })
     },
     100,
-    [saveAsAFile, basePath, includeSubtitle]
+    [saveAsAFile, basePath, includeSubtitle, keepQuality]
   )
   return (
     <div>
       <p className="text-lg">スクリーンショットの設定</p>
+      <label className="block mt-4">
+        <span>スクリーンショットを圧縮しない</span>
+        <input
+          type="checkbox"
+          className="block mt-2 form-checkbox"
+          checked={keepQuality}
+          onChange={() => setKeepQuality((enabled) => !enabled)}
+        />
+      </label>
       <label className="block mt-4">
         <span>ファイルに保存する</span>
         <input

src/types/setting.ts

@@ -17,6 +17,7 @@ export type ScreenshotSetting = {
   saveAsAFile: boolean
   includeSubtitle: boolean
   basePath?: string
+  keepQuality: boolean
 }
 
 export type ExperimentalSetting = {