WebSockets-Sending image to Clients connected - html

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.

Related

how can I convert a GIF to Lottie json?

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.

How to convert image to string in angular

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.

Embed images into an HTML email with Xamarin.iOS

I am trying to send an email from an iOS device (Using Xamarin) in an HTML format with images embedded in the body of the email.
Some solutions that I found online suggest to use an approach similar to the one shown here:
NSData ImgData = UIImage.FromFile(FileName).AsJPEG();
string img64baseStr = ImgData.GetBase64EncodedString(NSDataBase64EncodingOptions.None);
string srcStr = string.Format("data:image/jpg;base64,{0}", img64baseStr);
Using the code above I can see the pictures properly in the iOS Email client. However, when the email is sent I can't see the images on the receiving side.
There are other setbacks to this approach, but I can avoid getting into those in more details at this point.
I have also tried using the images as resources in the project. However, when I reference the pictures directly in the HTML in this form:
<img src="Pic1.png" width="700" height="500" alt=""/>
the linkage is broken and the email is missing the images.
How can I properly reference resource images in an HTML email?
So it seems like the approach described above, of converting the data object to a base64 string is deprecated by most email clients for security reasons and the email client will block Dada URIs that are arriving this way.
I found the question posted in the link below to be helpful for understanding why things weren't working for me:
base64 encoded images in email signatures
Specifically refer to the answer posted by #Shadow2531 and the discussion that followed it.
Finally, I was able to achieve what I wanted using the MailKit package that is available on NuGet.
The package has a pretty comprehensive documentation. Specifically for the problem I was trying to solve, take a look at this page:
http://www.mimekit.net/docs/html/CreatingMessages.htm
Good luck.

What is this image stored as?

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=">

Does HTML allow for embedded encoding of images by stream?

Example:
<div id="sampleimage">
***Stream or Serialize JPEG Image from Server Here w/o Sending another Request***
</div>
So basically, send everything in a single response.
In some browsers (in FF, Chrome, and apparently IE8) you can use the data URL scheme to embed an image file in HTML.
It looks something like this (taken from the RFC):
<IMG
SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
ALT="Larry">
You can see that the data for the image is encoded in base64. I believe you can also use this format to assign images in javascript and to use them in CSS.
Yes, it is possible: See here