28
Views
8
Comments
Solved
Use javascript to rotate image
Question

Dear OS forum,

I am working in OutSystems reactive. 


I'm trying to rotate an image, not just on the screen but the images binary needs to be saves as it rotates.


In the Forge I found an image rotator: https://www.outsystems.com/forge/component-overview/2103/image-rotator. However, this doesn't seem to work in reactive.


I found this JavaScript: http://jsfiddle.net/6ZsCz/803/

However, I don't know how to make this work in OutSystems. I'm having problems with 

    var canvas = document.getElementById('ImageToRotate');

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

I get an error that get context is null. 


Any ideas on this??

Kind regards,

Liesbeth




Rank: #171
Solution

Hi Liesbeth,

I checked this extension you tried to use, and the reason it was not working, is that it only rotates the image if it is not in the right orientation, see:



I cloned it and made an easy addition for you, I added 2 new action, to rotate right or left without the validations it originally had:

 


This way you will be able to use it in a Reactive app and turn to right and left in your server side, saving it in the same call:


I'm attaching an .opa file with the new extension (.xif) file and the Reactive Module to serve as a sample.

You have only to call the action and use the output to save in your database, something like this:



I will try to contact the owner of the component to add these functionalities as well,

There are also other functionalities, like flipping the image that could be added, let me know if this would help you and I can try to create other actions for you.

I hope it helps ;)

Cheers and Regards,

RR :)

RotateImageServerSide.oap

Rank: #70

Hi Lisbeth,


And the undefined error is saying you that canvas is undefined.

When you have this:


  var canvas = document.getElementById('ImageToRotate');


You're using instead of ".


Besides, usually in OutSystems, you get the Ids from the name of the widget, something like naming the button (in the example I call it Button):


And then on Javascript you use <WidgetName>.Id, so it would be something like this for Traditional Web:


"var canvas = document.getElementById(" + Button.Id + ");"


And for Mobile / Reactive, passing the Id as a parameter, something like this:


Hope it helps.

Cheers,

João

Rank: #621

Hey João

Thank you for taking a look into this. The ' should actually work. They define an element in my screen (in this case an image with id 'ImageToRotate'). It has worked for me before using a button.

I did however just try with " and then I still get the same error message.


Rank: #70

From what I know in OutSystems, one should use the Ids coming from the widgets (in this case an Image) as I mentioned.


Have you tried with ImageToRotate.Id?


Cheers,

João

Rank: #621

Yes, I have tried that as well..


I've added the oml

RotateImage.oml

mvp_badge
MVP
Rank: #76

Hi Liesbeth,

Based on the mentioned use-case, I create a sample app - JSRotateImage

Refer the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

ReactiveJSRotateImg.oml

Rank: #171

Hi Liesbeth,

If you need to save the content after rotating it,maybe using javascript is not the best approach, since it would only rotate the image in your client side.


Maybe you should try to rotate it in your server side and save it in the same server call...

This component you posted seems to be a nice choice to do it.
I have never used it, but if it does what it says I think you could use it.


Have you tried to encapsulate it in a 'service' to use as a server action in your reactive app? It should work.

Rank: #171
Solution

Hi Liesbeth,

I checked this extension you tried to use, and the reason it was not working, is that it only rotates the image if it is not in the right orientation, see:



I cloned it and made an easy addition for you, I added 2 new action, to rotate right or left without the validations it originally had:

 


This way you will be able to use it in a Reactive app and turn to right and left in your server side, saving it in the same call:


I'm attaching an .opa file with the new extension (.xif) file and the Reactive Module to serve as a sample.

You have only to call the action and use the output to save in your database, something like this:



I will try to contact the owner of the component to add these functionalities as well,

There are also other functionalities, like flipping the image that could be added, let me know if this would help you and I can try to create other actions for you.

I hope it helps ;)

Cheers and Regards,

RR :)

RotateImageServerSide.oap

Rank: #621

Hi Raphael,


Thank you so much! Your solution works perfectly. Hopefully the ImageRotator will add this to the extension soon. I will implement this solution in my application.


Thank you all for your efforts on this issue. It is very much appreciated!! 

Cheers

Liesbeth