Take webpage screenshot using HTML5 and jQuery

In this post, you will find various solutions and ideas about how to take or capture webpage screenshot using HTML5 Canvas, jQuery and Javascript. This is quite useful feature as you can allow their end users to report about any errors, feedback or suggestion with webpage screenshot.

I had previously posted about other HTML5 related post like HTML 5 based text editor plugin, Top & Best 5 Free HTML 5 audio player and Upload files Gmail style using jQuery and HTML 5. In this post, you will find jQuery plugins and JavaScript techniques to take webpage screenshot.

1. Feedback.js

This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send.

It does not require any rendering from the server, as the whole image is created on the clients browser.

2. Html2Canvas

The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

As a result, it is only able to render correctly properties that it understands, meaning there are many CSS properties which do not work.

3. Take Screenshot with HTML5 and JavaScript

This article explains how to take webpage screenshot using HTML5 and JavaScript code only. Yes you have read it correct its using HTML5 and JavaScript only. :). You can check the live demo here.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

10+ Best jQuery Player and HTML5 Player

Find list of best jQuery Player and HTML5 Player available today. This list includes jQuery based audio, video and youtube players, HTML5 based audio and video players. These plugins are really useful due to increasing popularity of embedding videos in website or blogs. Gone those days when Flash was used to display video on the website. Use the power of jQuery and HTML5 to embed audio and video.

Related Post:

• Top 10 jQuery Popup window plugins
• Top 5 Best jQuery LightBox Plugin
• 50+ Most Popular and Useful jQuery Plugins from 2012
• Make better video viewing experience using jQuery

FitVids.JS

Flare Video

Responsive & Touch Audio Player

Audio Slideshow with jPlayer

VideoJS

HTML5 Music Player

jPlayer

BIGVideo.js

Media Element

Video LightBox

SoundManager 2

YoxView

JQUERY.MB.YTPLAYER

jQuery HTML5 video background

audio.js

jQuery tubular

JQUERY.VIDEOBG

Accessible Audio Player (AAP)

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

Top & Best 5 Free HTML 5 audio player

HTML 5 is going to be the future because off its features. Before HTML 5, to play any type of audio within a browser was possible using Adobe Flash or other browser plugins. HTML 5 defines a new <audio> element which specifies a standard way to embed an audio file on a web page. So in this post, I am sharing Top and Best 5 Free HTML 5 audio player that you can easily integrate in your website.

Media Element

Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API.

SoundManager 2

SoundManager 2 makes it easier to play audio using JavaScript. Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API.

HTML5 Music Player

HTML5 Music Player is a jQuery plugin which lets you play mp3 as well as ogg files.

audio.js

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

Accessible Audio Player (AAP)

AAP uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don't. It is fully accessible cross-browser media player.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

HTML 5 based text editor plugin

Previously I had posted about collection of "jQuery Text Editor Plugins" which are developed in jQuery. But in this post, I will show you a Rich Text Editor plugin based on HTML 5 only. No jQuery is needed to use this plugin.

WYSIHTML5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Features

• It's fast and lightweight (smaller than TinyMCE, Aloha, ...)
• Auto-linking of urls as-you-type
• Generates valid and semantic HTML5 markup (even when the content is pasted from MS Word)
• Uses class names instead of inline styles
• Unifies line break handling across browsers
• Uses sandboxed iframes in order to prevent identity theft through XSS
• Speech-input for Chrome
• No jQuery required

Browser Support

• Firefox 3.5+
• Chrome
• IE 8+
• Safari 4+
• Safari on iOS 5+
• Opera 11+

How to use it

To use this plugin, one need to include 2 script files which you can download from its official website. The first script contains the html5 parser rules that are needed for wysihtml5 in order to create valid and desired markup. The second script is the minified wysihtml5 library.

All you need to do is to place a textarea control on your page and WYSIHTML5 transforms it into a rich text editor. This plugin comes with many options for configuration and has various events to handle.

• Live Demo
• Getting Started
• Download

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

Upload files Gmail style using jQuery and HTML 5

Gmail style file upload is quite a good feature. You can easily drag the file from your system and drop it on the uploader and file gets uploaded. In this post, I will show you a jQuery plugin which can be integrated with ASP.NET application and which allows uploading like Gmail style.

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system Gmail into your web app. You only need to create a dropbox element (i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. It also works with the multiple input file element.

The upload function is divided into two asynchronous operations: client side, the file is loaded in the browser memory with a FileReader object. Useful if you want, for example, to show the image preview while uploading a picture. The server side operation consists in sending the binary file string to the postUrl. It has been tested and works on Firefox and Chrome.

How to use it?

$(document).ready(function() {
  $("#dropbox").html5Uploader({
      name: "foo",
      postUrl: "Upload.aspx" 
  });
});

<div id="dropbox"></div>
<input id="multiple" type="file" multiple>

Available Options:

• name: upload field identifier.
• postUrl: the url to post the file data.
• onClientAbort: Called when the read operation is aborted.
• onClientError: Called when an error occurs.
• onClientLoad: Called when the read operation is successfully completed.
• onClientLoadEnd: Called when the read is completed, whether successful or not. This is called after either onload or onerror.
• onClientLoadStart: Called when reading the data is about to begin.
• onClientProgress: Called periodically while the data is being read.
• onServerAbort: Called when the post operation is aborted.
• onServerError: Called when an error occurs.
• onServerLoad: Called when the post operation is successfully completed.
• onServerLoadStart: Called when posting the data is about to begin.
• onServerProgress: Called periodically while the data is being posted.
• onServerReadyStateChange: A JavaScript function object that is called whenever the readyState attribute changes. The callback is called from the user interface thread.
• onSuccess: Called when the post operation is successfully completed, the ReadyState is 4 and the HttpStatus is 200. Useful to get back informations from the server.

Download Plugin

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...