How to Convert HTML file TO GIF - javascript

I am creating wait Cursor using CSS and google Js file.
Now I want convert That HTML file into GIF file...
Because I am using other JS file in my project so some page is conflict with google js file.
This is the link of my HTML page which I want to convert.
https://docs.google.com/file/d/0B_r9LchWcj7zMnQtdnRUaC1DUjA/edit

One way to do this is with a screen capture software. Create a video of the loader, then clip it to one cycle. Then, if you have a Mac, download the Gifrocket app, which converts the video to a gif. I had a rough go at it, and this was the result:

I was looking for something similar when I needed to convert a piece of Rich Media Ad to GIF. I used this very useful and free program called ScreenToGif. Here's the link for it:
http://www.screentogif.com

I suggest you to do the below .. Its a bit weird, but I assume that will work for you.
Do the below steps.
Download and install a screen capture software, for instance, Snagit.
Run your HTML along and enable the Video screen capture/ image sequence screen capture.
Open Photoshop, import the video/image sequence of the HTML that you have video captured which is having the wait cursor effect for which you need the GIF.
Save for web/export to the gif format.
This is how you can get what you are looking for, as HTML to GIF converter sounds impractical to achieve what you want.
Hope this helps.

Related

How to minimize load time of a landing page

I'm honestly confused about where to start with minimizing the load time of a website i'm building - https://projectrhea.herokuapp.com/ . Currently takes around 9 seconds to load the website which I want to try and bring down to sub 3 seconds.
I've done a diagnostic test, shown here https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1 .
From what I can see there are three main reasons it would be taking awhile to load.
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
The third part is the video file I have.
I would love to keep this
video as I just like how it fits in the site. I'll try and minimize
the file size after I have worked out the above issues.
This is my first real time trying to solve an issue like this and I would really appreciate the knowledge a more experienced coder could bring to this. Thanks!
Use following automated tools:
https://developers.google.com/speed/pagespeed/
https://gtmetrix.com/
Chrome's lighthouse
Optimize image sizes and quality. (Automated tools above provide You with the optimized images)
Place Your CSS file at the beginning of your bootstrapping file such as index.html
Compress CSS files (remove the formatting)
Place Your JS file at the bottom of the file.
Compress JS files (remove the formatting)
Trying to address the specific points raised by you.
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
Your JS files are not minified. Please make sure you are minifying your js files and order as suggested by Ante Jablan Adamović.
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
You should combine and minify all the CSS files.
For minification and combining of JS and CSS you can use gulp.
https://github.com/gulpjs/gulp
The third part is the video file I have.
I would love to keep this video as I just like how it fits in the
site. I'll try and minimize the file size after I have worked out the
above issues.
I can see that you are serving some resources through S3. See if you can move your video as well to S3 and serve it through cloudfront.
Place your css imports in the top of the page and import your javascript after your html body ends.
Well for a start -
Place the css at the top, consider using a js loader to load the js once the page has loaded.
If you can obviously remove everything you don't need their are tools to do this but in reality is a tough task especially if its a template
And finally with the video get an image of the first frame, show the image not the video when the page loads.
How to make a loading image when loading HTML5 video?
The bigger your css, the longer the page takes to load. So try to reduce/minify css and try to use css in a single file. Same with JS also
Use Lazy load for images so webpage displays quickly without calling images.
Make sure server is using keep-alive as it can truly affect how your server fulfills requests.
Enable gzip compression
Minimize page redirects because it affect page speed
Enable browser caching so your browser can load the page without having to send another HTTP request to the server.

HTML : load thumbnail image and full image faster

I have a blog website that loads the images slowly i want to know how to make them load faster and:
I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so?
-how to i preload images ? or is there any better way ?
Here are some pointers.
Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading. You can use JavaScript or CSS (background-image) to achieve such a placeholder.
Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.
Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!
Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.
My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.
This post might also help Load a low-res background image first, then a high-res one

How to save part of an html page to an image or pdf either on client (javascript) or asp.net on the server side?

Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.
IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.
In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/

Getting drag and dropped files icon using Javascript

I want to get an icon's image when a user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?
I would suggest a mix of:
This great drag and drop upload library:
http://valums.com/ajax-upload/
This javascript code to preview uploaded images before they upload
How to upload preview image before upload through JavaScript
You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.
Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...
An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.
You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !
You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)
Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.
Here is a great tutorial that I think can help you with many problems. If I understood your problem right.
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer
Here you've a "Using drag feedback images", maybe this can help to you :)

Javascript and CSS Lightbox that can view PDFs

Has anyone ever found any lightbox type javascript / css code that can display PDFs? I have tried many libraries and none have worked for me. The environment needs to be IE6/IE7 compatible.
I am looking for something similar to this:
Lightbox 2
http://stickmanlabs.com/lightwindow/
Specifically, check out the demo "Flash Paper" for embedding PDFs
Good luck finding anything that will display a PDF in browser without a plugin.
You might consider embedding an IFrame that points to the PDF in a lightbox style. That's about the best you'll be able to do, though.
To sum up your options:
If a screen-shot of a portion of the PDF is good enough, then as tomlog answered, you could find a library or existing code to extract said portion as an image, and display that image in the "lightbox".
If, however, you need actual PDF-viewing functionality, it can not be done in IE6/7 without loading into an Adobe Flash/swf object, or contained within the official Adobe Reader browser plug-in somehow.
Going the plug-in route, you will have to use an iFrame.
If the Flash/embedding approach seems better, jvenema suggested http://stickmanlabs.com/lightwindow/ which has a "Flash Paper" demo (Flash Paper is the official way to embed PDF documents) you could check out, or embedding something else, as seen at http://www.scribd.com/ and others.
artViper's bumpbox
Bumpbox 2.0 a lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files. Now also plays
Youtube© & Vimeo© videos directly out of the box!
If it's not here, it's not anywhere: lightbox clones
You have a couple of solutions here
You could embed the PDF in an iframe (in a lightbox or panel) like http://www.cs.tut.fi/~jkorpela/html/iframe-pdf.html
Otherwise you could upload the PDF to a document sharing site like Issuu and embed their swf in your web page.
If you can find a PDF library that allows you to convert each page to an image (JPEG, GIF or something), then you could display those in your lightbox.
Obviously you would lose all the zooming and paging functionality of the PDF.

Categories

Resources