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.
Related
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.
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=">
Either with a headless browser, google filesytem API, or some other way.
This question says you can, but not how.
Converting d3.js SVG code to a standalone program -- any suggestions?
google groups has more hints, but no examples.
I've spent a bunch of time playing with the node-canvas example, as well as the phantomJS svg example. I can't figure out how to make them play together. Apparently in Linux, the x-windows Javascript rendering engine isn't very good anyway.
My API reading list of JavaScript, d3.js, SVG, CSS, and other HTML stuff is already mountainous - all I want to do is save a .svg image that I generate with d3.js.
Help, please.
This will neither be easy nor overtly complicated. Main reason being is that a web browser alone cannot save an SVG file from a DOM rendering, unless it's Chrome version 12.
Thing is that an SVG image is just a plain text file with a bunch of rendering instructions. The solution you point to basically says you would have to do this server side. Though they suggest node.js, you can do this in any server-side language you'd like.
Trick is to take your JavaScript/HTML interface, make it either keep track of all objects you create, or otherwise be able to serialize all of them, and then send that data (ex: via ajax) to a server-side program which would reconstitute that to an SVG file and offer it to be downloaded.
The challenge is that both your programs (client-side, javascript and server-side: php/etc.) will more or less have to re-implement SVG specifications to make this work and have common understanding as to how you serialized it for the transmission. There are virtually no stock components that do this for you.
There are some examples of using node().parentNode.innerHTML with 64B encoding, but I couldn't figure out how to use it.
https://groups.google.com/forum/?fromgroups#!topic/d3-js/aQSWnEDFxIc
The easiest solution I've found so far is FileSaver.js demo here:
http://eligrey.com/demos/FileSaver.js/
It uses the HTML5 filesaver interface.
I came across this today, I've not tried it but perhaps someone will find it useful:
https://github.com/d3-node/d3-node
const D3Node = require('d3-node')
const d3n = new D3Node() // initializes D3 with container element
d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>
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.