resize canvas fix

andreyadrian · May 16, 2021 · 900f740 · 900f740
1 parent 379e01f
commit 900f740
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 37 deletions.
diff --git a/web/image.js b/web/image.js
@@ -501,6 +501,31 @@ function drawGrayPixel(img, i, alpha, output) {
   drawPixel(output, i, val, val, val);
 }
 
+function resizeCanvasImage(canvas, img, max_width, max_height) {
+  if (!canvas) {
+    return
+  }
+  var width = canvas.width;
+  var height = canvas.height;
+
+  if (width > height) {
+    if (width > max_width) {
+      height *= max_width / width;
+      width = max_width;
+    }
+  } else {
+    if (height > max_height) {
+      width *= max_height / height;
+      height = max_height;
+    }
+  }
+  canvas.width = width;
+  canvas.height = height;
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0, width, height);
+  return canvas
+}
+
 // from https://gist.github.com/ORESoftware/ba5d03f3e1826dc15d5ad2bcec37f7bf#file-resize-base64-js
 function resizeImage(base64Str, max_width, max_height) {
   var img = new Image();

diff --git a/web/index.js b/web/index.js
@@ -45,7 +45,9 @@ let ankiModelFieldMap = {}, fieldValueMap = {};
 let savedAnkiCardModels = [];
 let ankiDecks, ankiModels, ankitags, selectedDeck, selectedModel;
 let modelFieldsNeedLoad = false;
-let isResizeAnkiScreenshot = false
+let isResizeScreenshot = false;
+let resizeScreenshotMaxWidth = 1280;
+let resizeScreenshotMaxHeight = 720;
 
 // Texthooker
 let isRemoveRepeatedSentences = false
@@ -527,21 +529,16 @@ function getVideoImage() {
   cv3.width = videoElement.videoWidth;
   cv3.height = videoElement.videoHeight;
   var ctx3 = cv3.getContext('2d');
-  ctx3.drawImage(videoElement, 0, 0, cv3.width, cv3.height);
-  let fullImageDataURL = cv3.toDataURL(`image/${logImageType === 'jpg' ? 'jpeg' : logImageType}`, logImageQuality);
-  if (isResizeAnkiScreenshot) {
-    fullImageDataURL = resizeImageData(fullImageDataURL);
+  if (isResizeScreenshot) {
+    cv3 = resizeCanvasImage(cv3, videoElement, resizeScreenshotMaxWidth, resizeScreenshotMaxHeight)
+  } else {
+    ctx3.drawImage(videoElement, 0, 0, cv3.width, cv3.height);
   }
-  fullImageb64 = fullImageDataURL.slice(fullImageDataURL.indexOf(',') + 1)
+  let fullImageDataURL = cv3.toDataURL(`image/${logImageType === 'jpg' ? 'jpeg' : logImageType}`, logImageQuality);
+  const fullImageb64 = fullImageDataURL.slice(fullImageDataURL.indexOf(',') + 1)
   return fullImageb64
 }
 
-function resizeImageData(imageDataURL) {
-  const imgBase64 = resizeImage(imageDataURL, resizeAnkiScreenshotMaxWidth, resizeAnkiScreenshotMaxHeight);
-  const imgData = imgBase64.split(';base64,')[1]; 
-  return imgData
-}
-
 function recognize_image(image) {
   OCRrequests += 1; // counter for auto-mode
   (async() => {

diff --git a/web/settings.js b/web/settings.js
@@ -83,6 +83,7 @@ function initConfig () {
             initLaunchLogWindow(logConfig['launchlogwindow']);
             initIsLogImages(logConfig['logimages']);
             initImageType(logConfig['logimagetype']);
+            initSetImageResize({isResizeScreenshot: logConfig['resize_screenshot'], screenshotMaxWidth: logConfig['resize_screenshot_max_width'], screenshotMaxHeight: logConfig['resize_screenshot_max_height']});
             logImageQuality = logConfig['logimagequality']; 
             logSessionMaxLogSize = logConfig['lastsessionmaxlogsize'];
             initIsLogAudio(logConfig['logaudio']);
@@ -92,7 +93,6 @@ function initConfig () {
             const ankiConfig = config[ANKI_CONFIG];
             initSetAnkiTags(ankiConfig['cardtags']);
             initSetAnkiDictionaries(ankiConfig['anki_dictionary']);
-            initSetAnkiMediaOptions({isResizeAnkiScreenshot: ankiConfig['resize_screenshot'], screenshotMaxWidth: ankiConfig['resize_screenshot_max_width'], screenshotMaxHeight: ankiConfig['resize_screenshot_max_height']});
             // Texthooker
             const texthookerConfig = config[TEXTHOOKER_CONFIG];
             initSetRemoveRepeatedSentencesSwitch(texthookerConfig['remove_repeat']);
@@ -331,6 +331,34 @@ function toggleLogImagesAndPersist() {
     isLogImages = toggleLogImages();
     eel.update_config(LOG_CONFIG, {'logimages': isLogImages ? 'true' : 'false'})();
 }
+
+function toggleResizeScreenshotSwitch() {
+    isResizeScreenshot = !isResizeScreenshot;
+    screenshotMaxWidthInput.disabled = !isResizeScreenshot;
+    screenshotMaxHeightInput.disabled = !isResizeScreenshot;
+}
+async function toggleResizeScreenshotSwitchAndPersist() {
+    toggleResizeScreenshotSwitch();
+    eel.update_config(LOG_CONFIG, {'resize_screenshot': isResizeScreenshot ? 'true' : 'false'})();
+}
+function initSetImageResize({isResizeScreenshot, screenshotMaxWidth, screenshotMaxHeight}) {
+    if (isResizeScreenshot === 'true') {
+        toggleResizeScreenshotSwitch();
+        resizeScreenshotSwitch.parentElement.MaterialSwitch.on();
+    }
+    resizeScreenshotMaxWidth = parseInt(screenshotMaxWidth, 10);
+    resizeScreenshotMaxHeight = parseInt(screenshotMaxHeight, 10);
+    screenshotMaxWidthInput.value = screenshotMaxWidth;
+    screenshotMaxHeightInput.value = screenshotMaxHeight;
+}
+function changeScreenshotMaxWidth(input) {
+    resizeScreenshotMaxWidth = parseInt(screenshotMaxWidth, 10);
+    eel.update_config(LOG_CONFIG, {'resize_screenshot_max_width': input.value})();
+}
+function changeScreenshotMaxHeight(input) {
+    resizeScreenshotMaxHeight = parseInt(screenshotMaxHeight, 10);
+    eel.update_config(LOG_CONFIG, {'resize_screenshot_max_height': input.value})();
+}
 function openFolder(relative_path) {
     eel.open_folder_by_relative_path(relative_path);
 }
@@ -529,30 +557,6 @@ async function selectDictionary() {
     }
 }
 
-function toggleResizeScreenshotSwitch() {
-    isResizeAnkiScreenshot = !isResizeAnkiScreenshot;
-    screenshotMaxWidthInput.disabled = !isResizeAnkiScreenshot;
-    screenshotMaxHeightInput.disabled = !isResizeAnkiScreenshot;
-}
-async function toggleResizeScreenshotSwitchAndPersist() {
-    toggleResizeScreenshotSwitch();
-    eel.update_config(ANKI_CONFIG, {'resize_screenshot': isResizeAnkiScreenshot ? 'true' : 'false'})();
-}
-function initSetAnkiMediaOptions({isResizeScreenshot, screenshotMaxWidth, screenshotMaxHeight}) {
-    if (isResizeScreenshot === 'true') {
-        toggleResizeScreenshotSwitch();
-        resizeScreenshotSwitch.parentElement.MaterialSwitch.on();
-    }
-    screenshotMaxWidthInput.value = screenshotMaxWidth;
-    screenshotMaxHeightInput.value = screenshotMaxHeight;
-}
-function changeScreenshotMaxWidth(input) {
-    eel.update_config(ANKI_CONFIG, {'resize_screenshot_max_width': input.value})();
-}
-function changeScreenshotMaxHeight(input) {
-    eel.update_config(ANKI_CONFIG, {'resize_screenshot_max_height': input.value})();
-}
-
 /**
  * 
  * Texthooker