diff --git a/css/style.css b/css/style.css index 154b655..bedc250 100644 --- a/css/style.css +++ b/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 { diff --git a/index.html b/index.html index 5d0e710..b15c797 100644 --- a/index.html +++ b/index.html @@ -77,8 +77,9 @@ +
Byte array is invalid (or empty).
-
Read images appear at step 3 below
+
If your image looks glitchy try changing the dimensions above and press the read button again.
Read images also appear at step 3 below for further processing.
diff --git a/js/script.js b/js/script.js index d1412bd..cb0c5ab 100644 --- a/js/script.js +++ b/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'; } }