Show the imported byte array image below the input field

css/style.css

@@ -543,6 +543,20 @@ input[type="radio"] {
   display: none;
 }
 
+.text-input-preview-canvas {
+  display: none;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-lg);
+  /* background: var(--primary-container); */
+  margin: 10px 0;
+  /* padding: 4px; */
+  max-width: 100%;
+}
+
+#read-images-note {
+  display: none;
+}
+
 .text-input-size {
   margin: 8px 0;
   color: var(--on-surface-variant);
@@ -705,9 +719,9 @@ input[type="file"]::file-selector-button {
 #images-canvas-container canvas {
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-lg);
-  background: var(--primary-container);
+  /* background: var(--primary-container); */
   margin: 10px 15px 10px 0;
-  padding: 4px;
+  /* padding: 4px; */
 }
 
 .inlineImg {

index.html

@@ -77,8 +77,9 @@
             <button onclick="handleTextInput('horizontal')">Read as horizontal</button>
             <button onclick="handleTextInput('vertical')">Read as vertical</button>
           </div>
+          <canvas id="text-input-preview-canvas" class="text-input-preview-canvas"></canvas>
           <div id="text-input-error" class="text-input-error">Byte array is invalid (or empty).</div>
-          <div class="note">Read images appear at step 3 below</div>
+          <div class="note" id="read-images-note">If your image looks glitchy try changing the dimensions above and press the read button again.<br>Read images also appear at step 3 below for further processing.</div>
         </div>
       </section>
     </section>

js/script.js

@@ -702,6 +702,17 @@ function handleTextInput(drawMode) {
       el.style.display = 'none';
     });
     checkImagesAvailable();
+
+    // Mirror the result onto a small preview canvas right below the
+    // buttons, so the pasted array is visible without scrolling to step 3.
+    const previewCanvas = document.getElementById('text-input-preview-canvas');
+    previewCanvas.width = canvas.width;
+    previewCanvas.height = canvas.height;
+    previewCanvas.getContext('2d').drawImage(canvas, 0, 0);
+    previewCanvas.style.display = 'block';
+
+    const readImagesNoteEl = document.getElementById('read-images-note');
+    readImagesNoteEl.style.display = 'block';
   }
 }