Canvas Advice
Quote from clueadventures on February 24, 2019, 3:21 pmI am trying to create a simple app that will take a photo and then add a logo/text to the photo and save it - is the best method to use Fabric? (which is quite complex it seems)? All advice appreciated
I am trying to create a simple app that will take a photo and then add a logo/text to the photo and save it - is the best method to use Fabric? (which is quite complex it seems)? All advice appreciated
Quote from luishp on February 24, 2019, 6:34 pmAlthough it seem a simple app, it's not that simple.
You should use a File Input object to allow user to take a photo or select a gallery picture.
Then load the image and convert it to Base64 format before using it on Fabric plugin in order to edit it.
In current version, there is not a file reader for binary files (it's already implemented for next version), just for plain text, nor a Base64 converter function, so you will have to use JavaScript to achive your goal.Take a look here:
https://stackoverflow.com/questions/35253777/take-picture-from-webcam-or-mobile-camera-in-web-applicationsBest regards.
Although it seem a simple app, it's not that simple.
You should use a File Input object to allow user to take a photo or select a gallery picture.
Then load the image and convert it to Base64 format before using it on Fabric plugin in order to edit it.
In current version, there is not a file reader for binary files (it's already implemented for next version), just for plain text, nor a Base64 converter function, so you will have to use JavaScript to achive your goal.
Take a look here:
https://stackoverflow.com/questions/35253777/take-picture-from-webcam-or-mobile-camera-in-web-applications
Best regards.
Quote from clueadventures on February 25, 2019, 7:18 pmI see and will the new version have a 'take picture' option, I notice other builders have this
I see and will the new version have a 'take picture' option, I notice other builders have this
Quote from clueadventures on February 26, 2019, 12:32 pmNot having much luck with that, tried that coding when image is uploaded or taken, but cannot get it into the container for fabric to work on - I guess it might be easier to do the whole thing in html using a canvas.
Not having much luck with that, tried that coding when image is uploaded or taken, but cannot get it into the container for fabric to work on - I guess it might be easier to do the whole thing in html using a canvas.
Quote from Ronnie on August 25, 2019, 7:04 amQuote from luishp on February 24, 2019, 6:34 pmAlthough it seem a simple app, it's not that simple.
You should use a File Input object to allow user to take a photo or select a gallery picture.
Then load the image and convert it to Base64 format before using it on Fabric plugin in order to edit it.
In current version, there is not a file reader for binary files (it's already implemented for next version), just for plain text, nor a Base64 converter function, so you will have to use JavaScript to achive your goal.Take a look here:
https://stackoverflow.com/questions/35253777/take-picture-from-webcam-or-mobile-camera-in-web-applicationsBest regards.
@luishp
Has the File Input to allow user to select image from device/local available yet?
Quote from luishp on February 24, 2019, 6:34 pmAlthough it seem a simple app, it's not that simple.
You should use a File Input object to allow user to take a photo or select a gallery picture.
Then load the image and convert it to Base64 format before using it on Fabric plugin in order to edit it.
In current version, there is not a file reader for binary files (it's already implemented for next version), just for plain text, nor a Base64 converter function, so you will have to use JavaScript to achive your goal.Take a look here:
https://stackoverflow.com/questions/35253777/take-picture-from-webcam-or-mobile-camera-in-web-applicationsBest regards.
Has the File Input to allow user to select image from device/local available yet?
Quote from luishp on August 25, 2019, 7:28 amHas the File Input to allow user to select image from device/local available yet?
It's available from september 2018 already.
There are are some sample apps showing how to load an external local text file.
The problem here is binary base64 conversion. We have already implemented a base64 converter but for any reason it doesn't work fine with binary files, like images.
Has the File Input to allow user to select image from device/local available yet?
It's available from september 2018 already.
There are are some sample apps showing how to load an external local text file.
The problem here is binary base64 conversion. We have already implemented a base64 converter but for any reason it doesn't work fine with binary files, like images.
Quote from Ronnie on August 25, 2019, 7:42 amYes, i’m Aware of the text file. Yeah... it’s the image file that has an issue. Just saw this
http://blueimp.github.io/JavaScript-Load-Image/
https://www.html5rocks.com/en/tutorials/file/dndfiles/
Yes, i’m Aware of the text file. Yeah... it’s the image file that has an issue. Just saw this
http://blueimp.github.io/JavaScript-Load-Image/
https://www.html5rocks.com/en/tutorials/file/dndfiles/
Quote from luishp on August 25, 2019, 10:20 amI already implemented the LocalBinaryFileToVar action command.
It does about the 90% of the work.
What we need in order to render it into Fabric is to transform the binary data into base64 format.
The EncondeToBase64 action command was my attempt to solve the problem, but it doesn't work for binary data.
Looking for a solution.
I already implemented the LocalBinaryFileToVar action command.
It does about the 90% of the work.
What we need in order to render it into Fabric is to transform the binary data into base64 format.
The EncondeToBase64 action command was my attempt to solve the problem, but it doesn't work for binary data.
Looking for a solution.
Quote from Ronnie on August 25, 2019, 2:33 pmThanks for the info.. let's all hope you'll find a solution or a workaround.
Maybe, one workaround is to have a command like SVGLoadFromHTML ....
I was exploring below script taken from the web, save it as an external HTML and load it into an iFrame. But I couldn't figure how to 'transfer' the iFrame object to write it to the Container1 canvas.
<svg width="250" height="250"> <circle cx="125" cy="125" r="100" fill="#aeaeae" /> <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="100px" font-family="Arial" dy=".3em">BC</text> Sorry, your browser does not support inline SVG. </svg>
Thanks for the info.. let's all hope you'll find a solution or a workaround.
Maybe, one workaround is to have a command like SVGLoadFromHTML ....
I was exploring below script taken from the web, save it as an external HTML and load it into an iFrame. But I couldn't figure how to 'transfer' the iFrame object to write it to the Container1 canvas.
<svg width="250" height="250"> <circle cx="125" cy="125" r="100" fill="#aeaeae" /> <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="100px" font-family="Arial" dy=".3em">BC</text> Sorry, your browser does not support inline SVG. </svg>
Quote from luishp on August 25, 2019, 4:43 pm@ronnie, loading a SVG into the canvas is quite more easy.
Taking your example:fabInitialize "Container1" fabLoadSVGFromString "Container1" "svg1" '<svg>\n <circle cx="125" cy="125" r="100" fill="#aeaeae" />\n <text x="130" y="125" text-anchor="middle" fill="white" font-size="100px" font-family="Arial" dy=".3em">BC</text>\n Sorry, your browser does not support inline SVG.\n </svg>' 20 20Just note I have had to replace double quotes from the fabLoadSVGFromString third parameter to single quotes manually.
As SVG are not binary files, you can load a local file and show it within the canvas.
@ronnie, loading a SVG into the canvas is quite more easy.
Taking your example:
fabInitialize "Container1" fabLoadSVGFromString "Container1" "svg1" '<svg>\n <circle cx="125" cy="125" r="100" fill="#aeaeae" />\n <text x="130" y="125" text-anchor="middle" fill="white" font-size="100px" font-family="Arial" dy=".3em">BC</text>\n Sorry, your browser does not support inline SVG.\n </svg>' 20 20
Just note I have had to replace double quotes from the fabLoadSVGFromString third parameter to single quotes manually.
As SVG are not binary files, you can load a local file and show it within the canvas.
Quote from luishp on August 25, 2019, 4:50 pmBy the way, I use this software to generate high quality SVG files and VisualNEO Web compatible:
Affinity Designer
Affinity PublisherIt's even possible to design most of the user interface in SVG and use VisualNEO Web for programming all the interactivity.
I will record a video explaining how to do it as soon as I get some time.
By the way, I use this software to generate high quality SVG files and VisualNEO Web compatible:
Affinity Designer
Affinity Publisher
It's even possible to design most of the user interface in SVG and use VisualNEO Web for programming all the interactivity.
I will record a video explaining how to do it as soon as I get some time.
Quote from Ronnie on August 26, 2019, 1:19 amThat’s wonderful. I was thinking along the line to get my creations done in SVG with a personal ‘drawing’ project i’m working on, to understand and use the full capabilities of using fabric.js. And as you said, using VisualNeo as the interactivity.
That reminds me of one issue - the security part. Although obfuscation does not prevent reverse engineering and hacking, it is a good start to prevent casual people from stealing sensitive scripts. Any status on the minify option during compilation?
That’s wonderful. I was thinking along the line to get my creations done in SVG with a personal ‘drawing’ project i’m working on, to understand and use the full capabilities of using fabric.js. And as you said, using VisualNeo as the interactivity.
That reminds me of one issue - the security part. Although obfuscation does not prevent reverse engineering and hacking, it is a good start to prevent casual people from stealing sensitive scripts. Any status on the minify option during compilation?
Quote from luishp on August 26, 2019, 11:05 amAlthough obfuscation does not prevent reverse engineering and hacking, it is a good start to prevent casual people from stealing sensitive scripts.
Client side scripts obfuscation is probably not worth it, as it's just quite easy to unobfuscate. That's just the way the web works.
The minify option is intended to just compress, not obfuscate, but I have found it can sometimes introduce errors.
All the included plugins JavaScript libraries are already minified.
On the other side information security can be achieved with neoPHP plugin.
Will try to record the video explaining how to use SVG as a user interface later today or tomorrow.
Best regards.
Although obfuscation does not prevent reverse engineering and hacking, it is a good start to prevent casual people from stealing sensitive scripts.
Client side scripts obfuscation is probably not worth it, as it's just quite easy to unobfuscate. That's just the way the web works.
The minify option is intended to just compress, not obfuscate, but I have found it can sometimes introduce errors.
All the included plugins JavaScript libraries are already minified.
On the other side information security can be achieved with neoPHP plugin.
Will try to record the video explaining how to use SVG as a user interface later today or tomorrow.
Best regards.
Quote from Ronnie on August 26, 2019, 6:14 pmSo, does that mean putting sensitive formula and scripts into a customised plugin would be better as its minified and raw text cannot be seen using simple editor? If that is the case, then at least I can ‘safeguard’ sensitive texts...
So, does that mean putting sensitive formula and scripts into a customised plugin would be better as its minified and raw text cannot be seen using simple editor? If that is the case, then at least I can ‘safeguard’ sensitive texts...
Quote from luishp on August 27, 2019, 6:15 amHi @ronnie, not exactly. I mean included libraries are minimized (as a sample of what can be done)
If you create your own plugin with it's own JavaScript files, or if you include JvaScript subroutines into your app you can minimize and/or obfuscate them using services like these ones:Online JavaScript minimizer:
https://jscompress.com/Online JavaScript obfuscator:
https://obfuscator.io/
Hi @ronnie, not exactly. I mean included libraries are minimized (as a sample of what can be done)
If you create your own plugin with it's own JavaScript files, or if you include JvaScript subroutines into your app you can minimize and/or obfuscate them using services like these ones:
Online JavaScript minimizer:
https://jscompress.com/
Online JavaScript obfuscator:
https://obfuscator.io/