I am using angular 7 and need to upload image and send it to server to put it in database. So i wondering how to convert image into string and latter back in image so i can display it in app?
This SO answer explains how to convert an image into base64 encoded data.
You can use the HTML5 for it:
Create a canvas, load your image into it and then use toDataURL() to
get the base64 representation (actually, it's a data: URL but it
contains the base64-encoded image).
I don't think that's how you want to save your images though. Continue researching perhaps.
Related
As you know we can make a lottie animation by "Adobe After Effect" but I want to know how can I do it by "Photoshop"?
Is there any way to convert a GIF to Lottie JSON ?
I find a way to solve this problem.
to convert a gif to a Json there are lots of website which convert Gif to Json but none of them has a proper output for lottie library.
so this has two steps to do that :
first you must convert Gif file to a video
I recommended this website:
Gif2Mp4
or any other converter.
in second you must use the link below :
Video to Lottie Json
this is the only website which has a good output to render
and by this Link we are able to convert Photoshop Animation to Json lottie file
first made an animation by Photoshop
then export your Animation in Video format .mp4
and in the end use
Video to Lottie Json
to convert your Video to lottie file
Be aware: by this way you are gonna lose transparent background according to #Dr.jacky Comment
I was looking for the same. I am looking for an automated method but a quick search led me here. So I figure it doesn't exist yet. I would assume without having done much research yet we should be able to break the GIF into individual images and then use after effects to create a Lottie version. We will also most likely need to create vector versions of the individual images to save on file size.
This already exists altough its built in Python you could use some of your own skill to try and convert this into JSON I'll include a link here.
This kind of converter does not make sense to use at all..
Gif has rasterized images in it, and your goal is to have vector (svg) images and to nicely animate paths etc so to be much smaller in sizes of course .. so, no converter of this kind will ever do you good in sense of final result!
Convert your GIF to TGS. I tried this repository but I wasn't succeed.
If you got the error or wasn't succeed on converting GIF to TGS, I'd suggest to start from TGS in first place.
Download the TGS format of the sticker with the help of this telegram bot: https://t.me/Stickerdownloadbot or any other ways you know.
Convert that TGS to Lottie JSON with the help of this https://michielp1807.github.io/lottie-editor/#/.
[Source: https://github.com/MichielP1807/lottie-editor]
Note: If you upload the generated JSON here: https://edit.lottiefiles.com/ or https://lottiefiles.com/preview, you could see the result and/or edit the file but, sometimes, it's a bit different than what we see via <com.airbnb.lottie.LottieAnimationView in Android. I already issued this.
I am new to Go and actually trying to figure out the way to handle images in templates.
My goal is to generate a barcode and insert it into a template I wrote.
The program already use go-wkhtmltopdf to generate pdf but lacks about images.
My main question is : what's nicest way to do this ?
Should I generate an image in a public directory then insert into img src tag/property ?
Supposedly you might get away by using embedding image data directly into your HTML pages.
Thank you #kostix I'm pretty close. Now i'm stuck into another problem. I generated barcode (128), converted it to base64. When I pass it to my template like so : it breaks my png once I open the pdf. But if I take the content of base64BarcodeUrl and paste it directly as src to my img tag, it works like a charm.
base64BarcodeUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABkEAAAAABJ+o5fAAABYUlEQVR4nOzSUYrCMBRA0ekw+99yhyLBUhIq2Pt3zo9V40si92/ffx6zba/XY+bxPGaPz8d317Xj/fksq9/P5p/Xr+Ze18/OtZoxO+/svqs51z1W97j7n+6eZ/vMzvvJfb/1+9woeBMWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGREBYJYZEQFglhkRAWCWGR+A8AAP//9bRAyVZD8C0AAAAASUVORK5C"
Is there any issue I'm not aware about "injecting" some data ?
I want to extract these telephone numbers from the website, either as an image or if possible as a string.
Here is an example from the website: Link
As you can see the telephone number is an image.
However I cant seem to view the image when I open the image source:
<img src="http://www.callmyname.sg/search/display_phone_number/VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0=">
But when put into html and viewed in a browser, you can see the image fine.
It's a solution to prevent people like you from scraping their website :)
The url http://www.callmyname.sg/search/display_phone_number/VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0= leads to a script that generates the image - probably based on the argument.
VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0=
Since it ends with an equals sign, I tried to decode it as base64:
UHdTMV9nAWYEYlRmXTtTNlc3BTAEOg==
Now it looks even more like base64, so I tried another round:
PwS1_gfbTf];S6W70:
So it's clearly not plaintext (or not encoded with base64), which would be ridiculous and would let you extract the number this way. They either use some special cipher, or store the numbers in database with this as identifier.
I don't think you can steal the phone number easily, only using OCR perhaps.
When you visit the URL, you will get garbage, since they do not send proper MIME header
�PNG IHDR�,���tRNS���7X}4IDATx���_HZo�g�� E��p��l��EHTx!]�DtQ�M�.x3��.dx�*b]Dl"]�D���bQq.B����Z2$��:ȡ�wq��9�s���Cx>W�}���ٳ��ڶ����]���Ǐ�/_���ݿ���ahh���\q����������555�=���*�"�*�*�f�����}uu�e�d2���o����?00p����J%ȴds���BB�˲�`�`0RJy����n�{cc�e�H$b�ۻ����(�~�_����A4�Z��_�V|��J�w�����t:��333.��ƕ������+^����L`���֑��W��3�X�" y���$p'U"��F���y���z&�ioo��萟�*� ����\�L&Sx����p�e���ׯ_R��y�J%�~����|qq��|e�Z%:�J�{��q��nW�ՉD"�J��~�n4��������̔Ty���qF���>BwGa�z����������8��ߡc�f��B�>!�Ub�N�s���|�F�^/B���Lj��i��NfJ��͛D"����� o!t��`����fvv�eم��V���D)�����x���d2966&�n� ^,0O4��(!D��l�h46�-�~��Tً>B�"�Q�>,�P��ok#U \�BU,�P���=G SA+GIEND�B`�
but it's really just ordinary PNG image:
img http://www.callmyname.sg/search/display_phone_number/VUhkVU5scGlBV1lDWWdFelVEUUhZQWRvQlRZR013PT0=
It's a PNG image, but the server doesn't specify the right content header. It tells your browser that is't an html page in UTF-8 encoding, so you just see some garbage (including the letters PNG at the start).
The <img> tag though doesn't know how to display text so it just tries to load it as an image (and with success).
I don't see a way to extract the numbers in any other way than just reading the image. Because it contains only numbers and will have a similar format all the time, maybe you can find a simple way to parse it instead of using a full fledged OCR library.
It's actually a png-file, generated by a computer before being displayed. You can reference it fine from any other page though, and you should also be able to download it easily (right click, save as ...) Note: I tested this, make sure you save the image with the extension .png and not .html which it will default to.
<img src="http://www.callmyname.sg/search/display_phone_number/QkNOVE1RODNBV1lDWWdVM1V6ZFZNZ1JyRFQ0Rk1BPT0=">
This is my first post on stackoverflow.com so I will try to be straightforward.
I have to develop a functionality of an webapp using websockets.I am able to send text data
using websockets,but not an image.I've looked and tryied different possibilies,but couldn't make it work.The processing of the image has to be in javascript.
Please help me if you have a solution.
Thanks.
Update : I've succeded to send an image with websockets using the FileReader Api of HTML5.
Thanks to everyone.
Websockects can't send images or anything else than binary data. You can solve this by converting the image runtime to Base64 data and decoding it through javascript to an image.
There are a lot of examples of how to decode a Base64 encoded image, but you can also embed it in the image src directly: <img src="data:image/png;base64,xxxxxxxxxxxxxxxxxx" /> where you replace the x'es with your Base64 data.
Is it possible to create data URI's in GWT?
I want to inject a byte array image as an actual image using a data URI.
You should checkout ClientBundle in GWT's trunk. It will create data urls automatically for browsers that support them and fallbacks for that other browser: http://code.google.com/p/google-web-toolkit/wiki/ClientBundle
The feature won't ship until GWT 2.0, but it's in heavy use now.
Yes. It is completely possible to do this. I'd done it for an application until I realized IE6 doesn't handle binary data streams this way. You can do it in several ways. For the purposes of my example, I'm already assuming that you've converted the byte array to a string somewhere, and that it is properly encoded and of the proper type for your data URI. I'm also assuming you know the basic format (or can find it) of your chosen data scheme.
I've taken these examples from the Wikipedia article on data URI scheme.
The first is to just use raw HTML to make the image reference as you normally would and have it inserted into the page.
HTML html = new HTML("<img src=\"data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==\" alt=\"Red dot\">");
You can also just use an image. (Which should produce roughly the same output HTML/JS.)
Image image = new Image("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==");
This allows you to use the full power of the Image abstraction on top of your loaded image.
I'm still thinking that you may want to expand on this solution and use GWT's deferred binding mechanism to deal with browsers that do not support data URIs. (IE6,IE7)