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?
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 have a PHP script that generates images. At this moment with every request PHP creates a temporary directory and fills it with the created images, then it sends the links to JS, which displays them in the browser in a special order.
Is there any way to pass these images directly from PHP to JS without a temporary directory?
I don't want to use temporary directories because it takes space and resources of server and I have to check that images download has been completed before deleting them.
I am thinking on using Json encoding and decoding but I don't like this because it's time consuming.
Is there another way to send images directly from PHP to JS?
There is a way to work with using src to php script with headers:
Using PHP to send a certain image
or
How to generate image file using this PHP function?
But this I could only work with one image per request.
I mean - if I have 5 or 6 divs with images I have to make 5 or 6 requests from JS to my php script.
Is there a way to send multiple images from PHP to JS?
My first idea would be to encode those images with base64_encode and pass that encoded data to your JavaScript. With this approach, you don't have to save those images anywhere.
More information on displaying base64 encoded images: Base64 Encoding Image
What you can do to not overload your server is to use an image hosting external website, like imgur, giphy, etc. This will scale the image for you in different size, see their api.
Here I am going to share a little hack, to host permanently contents into the internet archive. it is easy to implement from php.
Please don't use it for high traffic.
1/ Host your content on your site, create a url_link.
2/ Post your link to archive.org:
https://web.archive.org/save/*url_link*
3/ Response is a link on the form:
https://web.archive.org/web/20180XXXXXX626if_/*url_link*
4/ Modify the link, remove if_ this is the permanent link for the next centuries.
https://web.archive.org/web/20180XXXXXX626/*url_link*
5/ Delete content from your server
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
I am using the summernote text editor ( http://summernote.org/ )
As you can try there a way to upload images from your computer, can be tried on the website. I have then trouble saving these pictures to the server after the user sends the data of the textbloc ..
What i did try was to capture the data uri with a regex, then code it with php into a file but that doesent work
Wich is the best way to achieve this ?
Probably this answer will help:
PHP Data-URI to file
You probably forgot to base64_decode the data?
How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.
You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.