How to reduce the size of image by ProCamBase64?

MIT App Inventor Help
1

Hi all.
I used ProCamBase64.TakePreviewImageToBase64 got taken picture encoded into string, does it directly encoded as long as take picture or possibly to add a reduce before encoded?

also, how to use ProCamBase64.Zoom zoomRatio? fill percentage？

Thanks.

2

No, ProCamBase64 doesn't support resizing directly before Base64 encoding. You need to:

Either save the image first → resize → then encode. (Using taifun extn ) link

Or use a WebView trick to resize the Base64 string.

1 Like
3

Thanks.
I am thinking maybe put the zoomRatio before TakePreviewImageToBase64? what the zoomRatio works for?

BTW. I used the ProCamBase64.TakePreviewImageToBase64 only because my APP can't do the take picture.

4

Hmmm, but zoomRatio zooms in digitally before taking the preview image.

It does NOT reduce the resolution or file size — it just crops and enlarges part of the image.

So using zoomRatio won't help you reduce the image size or data length; in fact, it might make the image look worse due to pixel stretching

Plan using ProCamBase64 + WebView resizing

  1. Use TakePreviewImageToBase64.

  2. Pass the Base64 to a WebView using JavaScript + to resize.

  3. Get the new smaller Base64 back using WebView.WebViewStrin

1 Like
5

Thanks.
I'll test it.

6

Gald follow this steps

When Button1.Click
→ call ProCamBase64.TakePreviewImageToBase64

When ProCamBase64.Base64Received(base64String)
→ set TinyWebDB/WebViewer.WebViewString to ""
→ call WebViewer.GoToUrl("file:///android_asset/resize.html")  // custom HTML
→ set global originalBase64 to base64String

When WebViewer.PageLoaded
→ call WebViewer.EvaluateJavaScript("
     resizeBase64Image('" + global originalBase64 + "');
   ")

When WebViewer.WebViewStringChanged
→ set global resizedBase64 to WebViewer.WebViewString
→ call Label1.Text to length of global resizedBase64
→ (optional) Set Image1.Picture to "data:image/jpeg;base64," + global resizedBase64

resize.html code

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style="display:none;"></canvas>
<script>
function resizeBase64Image(base64) {
  var img = new Image();
  img.onload = function () {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // Resize logic
    var targetWidth = 200;  // change as needed
    var targetHeight = (img.height / img.width) * targetWidth;
    canvas.width = targetWidth;
    canvas.height = targetHeight;

    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
    var resizedBase64 = canvas.toDataURL("image/jpeg", 0.7).split(',')[1];
    
    // Send back to App Inventor
    AppInventor.setWebViewString(resizedBase64);
  };
  img.src = "data:image/jpeg;base64," + base64;
}
</script>
</body>
</html>

I hope i have explained you crystal clear :smile:

1 Like
7

Thanks a lot.