reduce image quality to 75%

README.md

@@ -92,7 +92,7 @@ Go to <b>"Manage my extensions"</b> on your browser, then click on <b>"Load unpa
   <br/> ![Mouseover2](./assets/mouseover2.gif)
 - <b>Infinite try</b>: click as much as you want on the question (don't forget to reset the question).
 - <b>Save history</b>: allows you to create a conversation with ChatGPT by saving the previous question with its answer. However, note that it can consume a significant number of tokens.
-- <b>Include images</b> (only work with gpt-4): allows you to include the images from the question to be send to the chatgpt api. However, note that it can consume a significant number of tokens.
+- <b>Include images</b> (only work with gpt-4): allows you to include the images from the question to be send to the chatgpt api. The quality is reduced to 75% to use less tokens.However, note that it can consume a significant number of tokens.
   <br/> ![Images](./assets/images.gif)
 
 ## Internal Features

src/utils/image-to-base64.ts

@@ -1,9 +1,10 @@
 /**
  * Convert an image html element into a base64 image string
  * @param imageElement
+ * @param quality (default: 0.75 -> 75%)
  * @returns
  */
-function imageToBase64(imageElement: HTMLImageElement): Promise<string | null> {
+function imageToBase64(imageElement: HTMLImageElement, quality = 0.75): Promise<string | null> {
   return new Promise(resolve => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
@@ -21,7 +22,7 @@ function imageToBase64(imageElement: HTMLImageElement): Promise<string | null> {
       canvas.height = img.height;
       ctx.drawImage(img, 0, 0);
 
-      const base64 = canvas.toDataURL('image/png');
+      const base64 = canvas.toDataURL('image/png', quality);
       resolve(base64);
 
       canvas.remove();