hypercore-kb / evbogue / 0001-Fix-image-upload-draw-to-canvas-before-hashing.patch

From bc8c4c864e6c83d0190c564965c6bb525287978b Mon Sep 17 00:00:00 2001
From: plankatron <fleeky@gmail.com>
Date: Fri, 23 Jan 2026 09:35:38 -0500
Subject: [PATCH] Fix image upload: draw to canvas before hashing

Fixed bug where canvas was created but never drawn to, resulting in
inconsistent image hashing. Now properly:

1. Draw image to canvas at full size
2. Convert canvas to data URL (JPEG, 90% quality)
3. Hash the data URL output

This matches wirecore and wiredove-cli protocol, ensuring images
display correctly on pub.wiredove.net.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 upload.js | 55 ++++++++++++++++++++++---------------------------------
 1 file changed, 22 insertions(+), 33 deletions(-)

diff --git a/upload.js b/upload.js
index abb26ce..254ef0c 100644
--- a/upload.js
+++ b/upload.js
@@ -19,39 +19,28 @@ export const imgUpload = async (textarea) => {
       const img = new Image()
   
       img.onload = async () => {
-        //const size = 256
-        //if (img.width > size || img.height > size) {
-        //  const width = img.width
-        //  const height = img.height
-        //  let cropWidth
-        //  let cropHeight
-        //  if (width > height) {
-        //    cropWidth = size
-        //    cropHeight = cropWidth * (height / width)
-        //  } else {
-        //    cropHeight = size
-        //    cropWidth = cropHeight * (width / height)
-        //  }
-  
-        //  canvas.width = cropWidth
-        //  canvas.height = cropHeight
-        //  ctx.drawImage(img, 0, 0, width, height, 0, 0, cropWidth, cropHeight)
-        //  const croppedImage = canvas.toDataURL()
-        //  avatarImg.src = croppedImage
-        //  const hash = await apds.make(croppedImage)
-        //  await apds.put('image', hash)
-        //} else {
-          const croppedImage = canvas.toDataURL()
-          const hash = await apds.make(img.src)
-          const mdimg = `![](${hash})`
-          console.log(await apds.get(hash))
-          if (textarea.value) {
-            textarea.value = textarea.value + '\n' + mdimg
-          } else {
-            textarea.value = mdimg
-          }
-        //  await apds.put('image', hash)
-        //}
+        // Set canvas to image size
+        canvas.width = img.width
+        canvas.height = img.height
+
+        // Draw image to canvas
+        ctx.drawImage(img, 0, 0)
+
+        // Get data URL from canvas (JPEG with 90% quality)
+        const dataUrl = canvas.toDataURL('image/jpeg', 0.9)
+
+        // Hash and store the data URL
+        const hash = await apds.make(dataUrl)
+        const mdimg = `![](${hash})`
+
+        console.log('Image uploaded, hash:', hash)
+        console.log('Stored data length:', (await apds.get(hash)).length)
+
+        if (textarea.value) {
+          textarea.value = textarea.value + '\n' + mdimg
+        } else {
+          textarea.value = mdimg
+        }
       }
       img.src = e.target.result
     }
-- 
2.43.0