Add screenshot settings

4 files changed, 20 insertions, 2 deletions

diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 96e390f4..29d8a215 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -224,6 +224,7 @@ function optionsSetDefaults(options) {
             server: 'http://127.0.0.1:8765',
             tags: ['yomichan'],
             sentenceExt: 200,
+            screenshot: {format: 'png', quality: 92},
             terms: {deck: '', model: '', fields: {}},
             kanji: {deck: '', model: '', fields: {}},
             fieldTemplates: optionsFieldTemplates()
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 594d53f7..75082f3e 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -51,6 +51,8 @@ async function formRead() {
     optionsNew.anki.tags = $('#card-tags').val().split(/[,; ]+/);
     optionsNew.anki.sentenceExt = parseInt($('#sentence-detection-extent').val(), 10);
     optionsNew.anki.server = $('#interface-server').val();
+    optionsNew.anki.screenshot.format = $('#screenshot-format').val();
+    optionsNew.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10);
     optionsNew.anki.fieldTemplates = $('#field-templates').val();
 
     if (optionsOld.anki.enable && !ankiErrorShown()) {
@@ -188,6 +190,8 @@ async function onReady() {
     $('#card-tags').val(options.anki.tags.join(' '));
     $('#sentence-detection-extent').val(options.anki.sentenceExt);
     $('#interface-server').val(options.anki.server);
+    $('#screenshot-format').val(options.anki.screenshot.format);
+    $('#screenshot-quality').val(options.anki.screenshot.quality);
     $('#field-templates').val(options.anki.fieldTemplates);
     $('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset));
     $('input, select, textarea').not('.anki-model').change(utilAsync(onFormOptionsChanged));
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 086d67d2..c6677018 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -293,6 +293,19 @@
                         <input type="text" id="interface-server" class="form-control">
                     </div>
 
+                    <div class="form-group options-advanced">
+                        <label for="screenshot-format">Screenshot format</label>
+                        <select class="form-control" id="screenshot-format">
+                            <option value="png">PNG</option>
+                            <option value="jpeg">JPEG</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group options-advanced">
+                        <label for="screenshot-quality">Screenshot quality (JPEG only)</label>
+                        <input type="number" min="0" max="100" step="1" id="screenshot-quality" class="form-control">
+                    </div>
+
                     <div id="anki-format">
                         <p class="help-block">
                             Specify the information you would like included in your flashcards in the field editor below.
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index eeb42040..0aa19aec 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -508,8 +508,8 @@ class Display {
             await this.setPopupVisible(false);
             await Display.delay(1); // Wait for popup to be hidden.
 
-            const format = 'png';
-            const dataUrl = await apiScreenshotGet({format});
+            const {format, quality} = this.options.anki.screenshot;
+            const dataUrl = await apiScreenshotGet({format, quality});
             if (!dataUrl || dataUrl.error) { return; }
 
             return {dataUrl, format};