I'm developing a phonegap app and I need it to be able to convert a string that will be in a localStorage variable into a PNG image and share it on WhatsApp Messenger. I've never done somethin' like that before. The idea of using canvas to generate the Image came to mind but I have no idea how to work it out from there and sent the data I've got from the dataToUrl function to WhatsApp. If someone can give me an idea on how to do it or an alternative way to do it I'd really appreciate. The string will be something like shown below:
"##########################Central Jogos##########################Apostador: testValor Apostado: R$5Valor Retorno: R$6.15Data Aposta: 19/02/2017 15:07Qtd. Jogos: 1-----------------------------------------Vasco X FlamengoEmpate: 1.2310/03/2017 15:30=======================Cambista: Cambista TesteTelefone: (82) 9977-8877"
I just found this cordova plugin that allows you to share images, links, base64 and other things not just on WhatsApp Messenger but also on Facebook, Twitter and a bunch of other apps. I think it might be extremely helpfull. Thank you guys that answered me.
SocialShare GitHub Repo
You can generate a base64 string from a <canvas>.
You need to use the <canvas> element where your image is going to be stored, basically you need to load your image into the canvas.
Then you can use the toDataURL to get the string on base64 format.
Convert your image to Base64 String like these image uri to Base64
Draw an image canvas using this Base64 string Base64 png data to html5 canvas
Reconvert Base64 string to Image using HTML5 Canvas to PNG File
you can also save the canvas image file by using reimg library
just save and share the saved image by step 4 on button click
Related
I have a base64 encoded string of a .tiff image that I get from the backend. If I decode it and then create a blob url, It works fine on Internet Explorer (by using on src of img tag).
I am not able to show it on Chrome. I have read some answers related to it where people are saying it is not supported on Chrome.
There are some libraries like https://www.npmjs.com/package/tiff-to-png but they require an image to be stored somewhere and then use it to convert. I only have a base64 string of the image. I am not able to find any solution online. My UI is built with ReactJs and backend is on Node.
On backend, I have a buffer of the .tiff image which we are converting to base64 to send it to UI. If we can do anything on buffer, that is also possible. Please help.
I am probably puting a bad query to google however i can not find proper solution.
I have an mobile app (client) that would allow admin to load images from server. Because all the data from server comes via JSON file, my idea is convert on server side an image to json object (ie with help of base64). Using this solution i might get multiple images and additional data in one JSON file. Later i would inject b64 encrypted image to image via javascript in mobile app.
I can also use jquery.
The questions are:
do i need encrypt image to base64 before changing it to json? (i'd do that via php). i guess i need to do this because of escape characters in pure image files.
how to decrypt from base64 to json/string variable in javascript/jquery?
how to put binary image (decrypted from base64) to an image. Ie vie var img = new Image()
Any answer to this questions would be appreciated.
Or maybe there is a better solution?
I'm using Nihilogic's library Canvas2Image to convert canvas drawings to PNG, and to give the users of my application the possibility to download that image.
What I need is to be able to give the downloadable file a name and the png extension (e.g. "goalboard.png") and not have it download just as an octet stream with no recognizable extension and the name "download", because the average Joe won't know what to do with such a file. And I need to do this on the client-side, because sending that byte stream to the server, depending on the quantity of data in it, can take up to 20 seconds (it's a big canvas!). Not to mention retrieving the image afterward...
So, how do I do this?
One of these should solve your problem (with canvas you can extract the image in base64 format):
Using HTML5/Javascript to generate and save a file
Reading a local file, encoding to base64, I would like to give the user an option to save the result to file
I had a big RaphaelJs canvas too and needed to allow the user to run a script that would save lots of canvas as png images.
I tried to transform my raphael into an svn, then my svg to a png and then using wget but that of course didn't work because my canvas where generated by javascript and wget can't deal with that. In the end I realised that I could just have my webapp to build a page with just the svg canvas and use phantomjs ( a headless browser) to save it as a png. It works briliantly.
It is as simple as that.
1. Make your webapp to build a page with just the svg canvas.
2. Create a svgToPgn.js file with the following code :
var page = require('webpage').create();
page.open('URL_TO_YOUR_HTML_PAGE', function() {
page.render('PATH_TO_PNG/example.png');
phantom.exit();
});
3. Download Phantom (http://phantomjs.org), unzip it and in the bin directory you will find the phantomjs executable. Run :
./phantomjs svgToPgn.js
Your png file will be saved in : PATH_TO_PNG/example.png
And I need to do this on the client-side
Well that requirement kind of kills your chances. Sorry.
You can't do what you want to do, the best you've got is displaying the image and telling the user to right-click save-as.
I have HTML5 canvas where the user has created an image. This is for an image drawing program. I now need to grab the canvas and post it to my server. I also need to post a set of key/value pairs along with the image. Could someone help me with how this is supposed to be done?
See Capture HTML Canvas as gif/jpg/png/pdf? for how to use toDataURL to turn your canvas into an image (encoded as a data URL) .
Consult the MDN Ajax tutorial to learn how to send data to your server asynchronously.
i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server.
Can i use html canvas for it ?
Any suggestion ?
thx in advance
You can get the image as data-url like this:
var dataUrl = document.getElementById('your-canvas').toDataURL();
You could then send this (very long string) to the server and save it to a file after decoding it (it is encoded in base64).
EDIT: Remember to submit this via POST, as suggested in the comments. GET has some length-limits in various browsers, so its likely to exceed those limits with such a huge amout of data.
Note that this is currently dead-on-arrival for Android (up to and including 2.3). Please star this issue - http://code.google.com/p/android/issues/detail?id=7901