[DrawerJs] Adapting to Reactive App
Forge component by John Salamat
Application Type
Reactive

Hi guys, I'm trying to implement the same component in my reactive web and I don't know if you can help me...


I already got the canvas in my screen, as you can see here:



But, when I click on the image, all of the controls are not showed.



I already check my console (browser) and I have no errors there. Do you have some idea to help me? Thanks.

Daniel Nogueira

Hi Daniel,


I played a bit with your code.

The problem was because "ConfigurationJson" contains reference to another variable "drawerPlugins", but reference is understood as text (not value) when "ConfigurationJson" is used as text parameter.


I attach a new oml which works for me, with plenty of my javascript trial and error code you can clean up XD

(basically if you apply what's in the screenshot it will work for you)

The final result:


DrawerJsReactiveMBA.oml

Hello Maxime, thanks for your reply.

Many thanks, it's working now :)

Hello Maxime, I'm trying now to add an Image automatically after starts my canvas...

I was take a look in the carstenschaefer/DrawerJs: A customizable WYSIWYG HTML canvas editor. (github.com) and there, I found this: https://carstenschaefer.github.io/DrawerJs/examples/api/.

I add this into my code:

window.drawer.api.startEditing();
So, after start my drawer, I'm starting in the editing mode (it's working).

But, When I try to set a Background image by URL or try do add an image (as shown in: https://carstenschaefer.github.io/DrawerJs/examples/api/.), using the setBackgroundImageByUrl() or addImageByUrl() methods, I can't figure out...


Do you have some idea?

thanks! :D

ps.: In attach is my current OML.


DrawerJsReactive.oml

Hi Daniel,


Please include your oml to help find the problem.


Thank you

Hi Maxime, this is my current OML.


Thanks

DrawerJsReactive.oml

Hi Daniel,


I played a bit with your code.

The problem was because "ConfigurationJson" contains reference to another variable "drawerPlugins", but reference is understood as text (not value) when "ConfigurationJson" is used as text parameter.


I attach a new oml which works for me, with plenty of my javascript trial and error code you can clean up XD

(basically if you apply what's in the screenshot it will work for you)

The final result:


DrawerJsReactiveMBA.oml

Hello Maxime, thanks for your reply.

Many thanks, it's working now :)

Hello Maxime, I'm trying now to add an Image automatically after starts my canvas...

I was take a look in the carstenschaefer/DrawerJs: A customizable WYSIWYG HTML canvas editor. (github.com) and there, I found this: https://carstenschaefer.github.io/DrawerJs/examples/api/.

I add this into my code:

window.drawer.api.startEditing();
So, after start my drawer, I'm starting in the editing mode (it's working).

But, When I try to set a Background image by URL or try do add an image (as shown in: https://carstenschaefer.github.io/DrawerJs/examples/api/.), using the setBackgroundImageByUrl() or addImageByUrl() methods, I can't figure out...


Do you have some idea?

thanks! :D

ps.: In attach is my current OML.


DrawerJsReactive.oml

Hi Daniel,


I can insert an image when I click on the image icon:


Can you describe in more details how you are trying to insert your image for me to understand?


Thank you

Hi Maxime,

clicking in the icon, I can do it too. My point is:

I want to receive an input parameter (could be binary data or base64, for example, but in this case, is not a problem cause I can create a traditional web app, and there, give me a valid link), and then, I want to add this image inside the canvas automatically, without any clicks in the icon, do you know what I mean?


I just need to add the image with de methods that I've mentioned (could be addImage or setBackground, I think the both worths for me).

For example, when the canvas is rendered, my image should appear at the start and then, I can draw in the image.

Hi Daniel,


Ok after checking your code, this is what I could find:

  • 1. If you want to use the BackgroundImage, you have to load the correct plugin:

  • 2. The function setBackgroundImageByUrl doesn't exist, but setBackgroundImageFromUrl does:


If you apply these two fixes, you'll have it:

Good luck!

I had tried it before, but, if you see, opening the console, we get too many errors and, getting these errors, is not possible to use many features, like draw polygon, or square, or circle, etc...AND, the most important, will not be possible to save the canvas after...


drawerJs.standalone.min.js:8 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.


This is the error i'm getting...

Hi Daniel,


This error is because you are loading an image from another domain (https://carstenschaefer.github.io/DrawerJs/examples/assets/bg.jpg), which could be a huge security issue, so it comes with restrictions.


As a workaround, you can import the image in the interface tab:


Next, use the "runtime path" URL in your script:

Then you can use it with no error in the console:

Hi Maxime, once again, many thanks for you reply!! You solved it :D

Thanks!!!!

Hi Maxime,

How to download Canvas Image in Reactive Application 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.