3 files changed, 36 insertions, 1 deletions
diff --git a/public/bluebey-studio/src/main.js b/public/bluebey-studio/src/main.js
index 57f0140..fcee21d 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -1317,6 +1317,7 @@ async function init() {
     syncPanel: () => app.panel?.sync(),
     imageCanvas: (options) => captureImage(options),
     savePNG: (options = {}) => savePNG(options),
+    saveJPG: (options = {}) => saveJPG(options),
     copyPNG: () => copyPNG(),
     addGionStamp: (item) => addGionStamp(item),
     saveSettings: () => exporter.downloadText(JSON.stringify(state, null, 2), `bluebey-settings-${exporter.timestamp()}.json`),
@@ -2060,6 +2061,30 @@ async function init() {
     toast(`PNGを書き出しました（${result.width}×${result.height}）`);
   }
 
+  /**
+   * JPEG: the small-file export. JPEG has no alpha, so the picture is laid on the
+   * paper colour first - a transparent background would otherwise come out black.
+   * A photo backdrop is kept at the chosen scale/quality, which makes the file a
+   * fraction of the same PNG.
+   */
+  async function saveJPG({
+    scale = state.render.pngScale ?? 2,
+    quality = state.render.jpgQuality ?? 0.9,
+  } = {}) {
+    const result = await captureImage({ scale, transparent: false });
+    const out = document.createElement('canvas');
+    out.width = result.width;
+    out.height = result.height;
+    const ctx = out.getContext('2d');
+    ctx.fillStyle = state.render.paper || '#ffffff';
+    ctx.fillRect(0, 0, out.width, out.height);
+    ctx.drawImage(result.canvas, 0, 0);
+    const blob = await new Promise((resolve) => out.toBlob(resolve, 'image/jpeg', quality));
+    exporter.downloadBlob(blob, `bluebey-${exporter.timestamp()}.jpg`);
+    toast(`JPGを書き出しました（${result.width}×${result.height}・画質${Math.round(quality * 100)}%）`);
+    return { blob, width: result.width, height: result.height, quality };
+  }
+
   /** Hide the gizmo and helpers so they never end up in an export. */
   async function withHiddenHelpers(fn) {
     const wasVisible = rig.helper.visible;
diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index db784cb..c798d42 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -2109,7 +2109,7 @@ export function buildPanel(app, root) {
   const exportSection = section(tabExport, '画像');
 
   exportSection.add(segmented({
-    label: 'PNGの大きさ',
+    label: '画像の大きさ',
     options: [
       { value: '1', label: '1倍' },
       { value: '2', label: '2倍' },
@@ -2122,9 +2122,17 @@ export function buildPanel(app, root) {
   exportSection.add(buttons({
     items: [
       { id: 'png', label: 'PNGを保存', primary: true, onClick: () => app.actions.savePNG() },
+      { id: 'jpg', label: 'JPGを保存', onClick: () => app.actions.saveJPG() },
       { id: 'copy', label: 'クリップボードにコピー', onClick: () => app.actions.copyPNG() },
     ],
   }));
+  const jpgQualitySlider = slider({
+    label: 'JPGの画質', min: 0.5, max: 1, step: 0.01, value: 0.9,
+    format: (v) => `${Math.round(v * 100)}%`,
+    onInput: (v) => { state.render.jpgQuality = v; },
+  });
+  exportSection.add(jpgQualitySlider.el);
+  exportSection.add(hint('JPG は PNG よりファイルが小さくなります（写真の背景を入れた絵に向いています）。JPG は透明にできないので、背景は「紙の色」で塗られます。'));
   const transparentCheck = check({
     label: 'PNGの背景を透明にする', value: false,
     onChange: (v) => { state.render.pngTransparent = v; },
@@ -2377,6 +2385,7 @@ export function buildPanel(app, root) {
     outlinePixelsSlider.set(state.render.outlinePixels ?? 2);
     leafBodyLineCheck.set(state.render.leafBodyLine !== false);
     transparentCheck.set(state.render.pngTransparent);
+    jpgQualitySlider.set(state.render.jpgQuality ?? 0.9);
     lightPad.set({
       x: state.render.lightAzimuth / 180,
       y: Math.max(0, (state.render.lightElevation - 5) / 80),
diff --git a/public/bluebey-studio/src/presets.js b/public/bluebey-studio/src/presets.js
index d9ed3e4..fd4d467 100644
--- a/public/bluebey-studio/src/presets.js
+++ b/public/bluebey-studio/src/presets.js
@@ -89,6 +89,7 @@ export function defaultState() {
       contactBlob: false,
       pngScale: 2,
       pngTransparent: false,
+      jpgQuality: 0.9,          // 0.5..1, used by 「JPGを保存」
       svgWidth: 2048,
       lightAzimuth: -38,
       lightElevation: 40,