[OutSystems Now] Compress photo taken from the phone camera

[OutSystems Now] Compress photo taken from the phone camera

Forge Component
Published on 4 May by OutSystems R&D
34 votes
Published on 4 May by OutSystems R&D

Is it possible to compress the photo taken by the phone camera before it is inserted into the DB? I am looking for something similar to WhatsApp's photo compression.


Hi Davis,

You have to use some javascript to do that.

If you search on google you'll find several posts with some examples that you can use. I found this, it basically involves manipulating the image with a canvas:



I have the following java script on change of the upload image.The parameter "Photo" contains the binary data.

var canvas = document.createElement('canvas');

    canvas.width = 200;

    canvas.height = 200;

 var ctx = canvas.getContext("2d");

var image=$parameters.Photo;

ctx.drawImage(image, 0, 0, 200, 200);

I am receiving exception in drawImage method:

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

How to solve this ?

HI Kartick, 

There's some steps that you're (probably) missing. That $parameters.Photo is what? The image binary?

If you look at the solution, you have to create a blob, then use it to set the source of an image html element and then pass it to the drawImage api.