fix qr error on firefox (#97)

Author: Sneezry

src/background.ts

@@ -33,14 +33,18 @@ function getQr(
     const qr = new Image();
     qr.src = dataUrl;
     qr.onload = () => {
+      const devicePixelRatio = qr.width / windowWidth;
       const captureCanvas = document.createElement('canvas');
-      captureCanvas.width = width;
-      captureCanvas.height = height;
+      captureCanvas.width = width * devicePixelRatio;
+      captureCanvas.height = height * devicePixelRatio;
       const ctx = captureCanvas.getContext('2d');
       if (!ctx) {
         return;
       }
-      ctx.drawImage(qr, left, top, width, height, 0, 0, width, height);
+      ctx.drawImage(
+          qr, left * devicePixelRatio, top * devicePixelRatio,
+          width * devicePixelRatio, height * devicePixelRatio, 0, 0,
+          width * devicePixelRatio, height * devicePixelRatio);
       const url = captureCanvas.toDataURL();
       qrcode.callback = (text) => {
         getTotp(text, passphrase);

src/content.ts

@@ -114,18 +114,14 @@ function grayLayoutUp(event: MouseEvent, passphrase: string) {
     return;
   }
 
-  let captureBoxLeft =
+  const captureBoxLeft =
       Math.min(sessionStorage.captureBoxPositionLeft, event.clientX) + 1;
-  let captureBoxTop =
+  const captureBoxTop =
       Math.min(sessionStorage.captureBoxPositionTop, event.clientY) + 1;
-  let captureBoxWidth =
+  const captureBoxWidth =
       Math.abs(sessionStorage.captureBoxPositionLeft - event.clientX) - 1;
-  let captureBoxHeight =
+  const captureBoxHeight =
       Math.abs(sessionStorage.captureBoxPositionTop - event.clientY) - 1;
-  captureBoxLeft *= window.devicePixelRatio;
-  captureBoxTop *= window.devicePixelRatio;
-  captureBoxWidth *= window.devicePixelRatio;
-  captureBoxHeight *= window.devicePixelRatio;
 
   // make sure captureBox and grayLayout is hidden
   setTimeout(() => {

src/qrdebug.ts

@@ -16,14 +16,18 @@ function getQrDebug(
     const qr = new Image();
     qr.src = dataUrl;
     qr.onload = () => {
+      const devicePixelRatio = qr.width / windowWidth;
       const captureCanvas = document.createElement('canvas');
-      captureCanvas.width = width;
-      captureCanvas.height = height;
+      captureCanvas.width = width * devicePixelRatio;
+      captureCanvas.height = height * devicePixelRatio;
       const ctx = captureCanvas.getContext('2d');
       if (!ctx) {
         return;
       }
-      ctx.drawImage(qr, left, top, width, height, 0, 0, width, height);
+      ctx.drawImage(
+          qr, left * devicePixelRatio, top * devicePixelRatio,
+          width * devicePixelRatio, height * devicePixelRatio, 0, 0,
+          width * devicePixelRatio, height * devicePixelRatio);
       const url = captureCanvas.toDataURL();
       const infoDom = document.getElementById('info');
       if (infoDom) {
@@ -38,7 +42,8 @@ function getQrDebug(
             `Screen Height: ${window.screen.height}<br>` +
             `Capture Width: ${qr.width}<br>` +
             `Capture Height: ${qr.height}<br>` +
-            `Device Pixel Ratio:${window.devicePixelRatio}<br>` +
+            `Device Pixel Ratio: ${devicePixelRatio} / ${
+                                window.devicePixelRatio}<br>` +
             `Tab ID: ${tab.id}<br>` +
             '<br>' +
             '<b>Captured Screenshot:</b>';