Added image compression for large images

[opencode-agent]

The fix is complete. I added image compression in src/components/PromptBox.tsx:

1. Added compressImage function - Compresses images over 4.5MB using canvas:

   • First checks if the file is under 4.5MB - returns as-is if so
   • For larger images, resizes to max 4096px dimension if needed
   • Compresses as JPEG with decreasing quality until under 4.5MB

2. Updated appendImages - Now uses compressImage instead of raw readFileAsDataURL

This ensures images are automatically compressed before being sent to the provider, preventing the "image exceeds 5 MB maximum" error.

Closes #2

opencode session  |  github run

[github-actions]

Code Review: Image Compression PR

Confidence Score: 4/5

Issues Found:

1. Unused Constant (Low)

const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB

This constant is defined but never used in the code.

2. Base64 Size Calculation Bug (Medium)

const base64Length = result.length - "data:image/jpeg;base64,".length;
const byteSize = Math.round((base64Length * 3) / 4);

The calculation (base64Length * 3) / 4 is mathematically correct for base64 decoding, but result.length already includes the prefix. The issue is this may not accurately reflect the final blob size. A more reliable approach would be to convert to a Blob and check its size, or use a more precise calculation.

3. Transparency Loss for PNG Images (Medium)

const result = canvas.toDataURL("image/jpeg", quality);

JPEG doesn't support transparency - any PNG with transparency will become black background. Consider either:

• Preserving the original format for PNGs
• Filling the canvas with white before drawing: ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height);

4. Potential Infinite Loop Risk (Low)

if (byteSize <= TARGET_IMAGE_SIZE || quality <= 0.1) {
    resolve(result);
} else {
    quality -= 0.1;
    tryCompress();
}

If the image is extremely large and even at 0.1 quality exceeds 4.5MB, the loop terminates but returns a very low-quality image with no warning.

5. Missing Cleanup for Image Object (Low)
The Image object created in img.onload isn't explicitly cleaned up. While modern browsers handle this, explicitly setting img.src = '' after loading can help free memory.

6. No Error Handling for Corrupt Images (Medium)
If an image file is corrupt or can't be decoded, the error is simply passed through without user feedback. Consider wrapping with a try-catch and providing user feedback.

Suggestions:

• Add input validation for non-image files that pass the filter
• Consider adding a loading indicator during compression for large images
• Add MAX_IMAGE_SIZE usage or remove the unused constant

opencode session  |  github run

[akemmanuel]

/oc can you fix this?

[opencode-agent]

Fixed the following issues from the code review:

1. Removed unused MAX_IMAGE_SIZE constant (line 57)

2. Fixed transparency loss for PNG images - Added white background fill before drawing: ctx.fillStyle = "white"; ctx.fillRect(0, 0, width, height);

3. Improved compression loop logic - Separated the termination conditions to warn when returning a very low-quality image

4. Added Image cleanup - Set img.src = "" after loading to free memory

5. Improved error handling - Added a more descriptive error message for corrupt images in img.onerror

opencode session  |  github run

[github-actions]

User opencode-agent[bot] does not have write permissions

github run