0

Get Canvas.toDataURL() sent to Richlet

asked 2020-06-22 08:54:18 +0800

54patman gravatar image 54patman
13 2

updated 2020-06-22 09:04:07 +0800

Hi,

Due to a project constraint I'm using richlets and no hmtl/jsp/zul pages, none. Just pure Java and I can't add anything except pure Java. The whole front end is built with richlets and javascript files.

I have a Canvas that I'm drawing to and this all works and I can even get the canvas.toDataURL('image/png') as base64 string in JavaScript. It all works.

But I can't get the string back to the server, as I need to save it as an image. I have tried adding onChange listeners but they never fire server side, even if I canvas.dispatchEvent(new Event ('change')).

How can I send this data without having to implement another endpoint, I'm using the Spring Boot with version 9.

Thanks

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2020-06-22 17:31:50 +0800

cor3000 gravatar image cor3000
5250 2 7
ZK Team

here an example that uses internal/existing ZK functionality to convert a canvas into a blob and upload it to a specific component (here a button any could do)

https://zkfiddle.org/sample/3g4588e/3-upload-canvas

I still use a small zul file to keep the example more concise. Everything possible in a zul file can also be done from java/Richlet code. I assume you already have experience with that to adapt the example code into your Richlet.

link publish delete flag offensive edit

Comments

Thanks so much! I'll try and adapt the code but I'm not sure I'm able to adapt the zul file. I have experience with creating components and adding listeners, but when it gets to the script and zscript I don't know how. Do you know of a guide? How do I adapt the script to be totally in java?

54patman ( 2020-06-22 20:17:03 +0800 )edit
0

answered 2020-06-23 12:14:37 +0800

cor3000 gravatar image cor3000
5250 2 7
ZK Team

updated 2020-06-23 12:15:33 +0800

zscript: is running at server side like java code, just copy/paste it into your richlet and correct syntax errors in case the zscript (beanshell) had some syntax sugar.

script: to add a script from a richlet you can either create a new Script() component and call setContent(jsString) with the script you want to add.

Or execute Clients.evalJavaScript("jsString") directly.

Or you can add scripts to client side live cycle listener (onBind will fire once the component has rendered at client side): anyComponent.setWidgetListener("onBind", "console.log('executed some JS here');")

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-06-22 08:54:18 +0800

Seen: 8 times

Last updated: Jun 23

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More