feat(app): fix print

app/package.json

@@ -30,6 +30,7 @@
     "@toast-ui/editor": "^3.1.1",
     "cordova-plugin-zeroconf": "1.4.2",
     "html2canvas": "^1.3.2",
+    "imagedata-filters": "^1.0.1",
     "qrcanvas": "^3.1.2",
     "rxjs": "^7.4.0",
     "solid-js": "^1.2.2",

app/src/App.tsx

@@ -43,8 +43,17 @@ const App: Component = () => {
                   return;
                 }
                 setTimeout(() => {
-                  html2canvas(document.querySelector(".vditor-reset")!)
+                  const ctn = document.querySelector(
+                    ".vditor-wysiwyg"
+                  )! as HTMLDivElement;
+                  const box = document.querySelector(
+                    ".vditor-reset"
+                  )! as HTMLDivElement;
+                  ctn.style.height = `${box.scrollHeight}px`;
+
+                  html2canvas(box)
                     .then((canvas) => {
+                      ctn.style.height = "unset";
                       const form = new FormData();
                       form.set(
                         "size",

app/src/components/operate/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .label {
-  min-width: 60px;
+  min-width: 90px;
 }
 
 .value {

app/src/utils.ts

@@ -1,15 +1,11 @@
+import filters from "imagedata-filters";
+
 export function toBlackWhiteBase64(canvas: HTMLCanvasElement) {
-  // const ctx = canvas.getContext("2d")!;
-  // const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const ctx = canvas.getContext("2d")!;
+  const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-  // for (let idx = 0; idx < image.data.length; idx += 4) {
-  //   const d = image.data;
-  //   if (d[idx] < 255 / 2 && d[idx + 1] < 255 / 2 && d[idx + 2] < 255 / 2) {
-  //     d[idx] = 0;
-  //     d[idx + 1] = 0;
-  //     d[idx + 2] = 0;
-  //   }
-  // }
-  // ctx.putImageData(image, 0, 0);
+  filters.contrast(image, { amount: 1.2 });
+  filters.grayscale(image, { amount: 1 });
+  ctx.putImageData(image, 0, 0);
   return canvas.toDataURL("image/png", 0.9).split(",").pop()!;
 }

app/yarn.lock

@@ -1014,6 +1014,11 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+imagedata-filters@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/imagedata-filters/-/imagedata-filters-1.0.1.tgz#c78a25744f764632218c1811430d38e1dac08c32"
+  integrity sha512-D06UOD7LIqga/PlB046xABHAFFj/Gf/EoSVM9zWlFFBSdLEOimlAkv83+3GUMSmfCFf1390kBJuqFKrtNW198g==
+
 inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"