WebAppers

/ best free open source web resources /

Shopify

JSCapture: Screen Capture Library with JS and HTML5

Posted · Category: Capture, MIT License

JSCapture is screen capturing library implemented with pure JavaScript and HTML5. It allows you to make screenshots and record a video of your desktop from your browser. JSCapture uses getUserMedia for screen capturing. Currently the API for screen capturing is supported only by Google Chrome, Canary and Chromium by enabling an experimental flag.

In order to enable the flag:
1. Go to chrome://flags/#enable-usermedia-screen-capture.
2. Enable – “Enable screen capture support in getUserMedia()”.
3. Restart your browser.

jscapture

Requirements: JavaScript Framework
Demo: https://mgechev.github.io/jscapture/
License: MIT License

Croppic – Open Source Image Cropping jQuery Plugin

Posted · Category: Capture, License Free

Croppic is an image cropping jquery plugin that will satisfy your needs and much more. Simply upload an image, and then you are able to crop the image as you like with the zooming in and out functionality. It works in IE 10+, chrome, and firefox. It uses FormData so there is no IE9 and prev versions support at the moment.

jquery-crop

Requirements: jQuery Framework
Demo: http://www.croppic.net/
License: License Free

Generate Screenshots for Responsive Websites

Posted · Category: Capture, MIT License

Pageres is a command-line tool for generating screenshots in different resolutions for websites. Pageres is focus on sizes: you could script it to generate screenshots of responsive websites. The command-line options allow you to specify many dimensions at once, so it’s easy to generate results for a responsive site.

pageres

Requirements: PhantomJS
Demo: https://github.com/sindresorhus/pageres
License: MIT License

Javascript Library for Precise Tracking of Facial Features

Posted · Category: Capture, MIT License

Clmtrackr is a javascript library for fitting facial models to faces in videos or images. It currently is an implementation of constrained local models fitted by regularized landmark mean-shift, as described in Jason M. Saragih’s paper. Clmtrackr tracks a face and outputs the coordinate positions of the face model as an array.

The library provides some generic face models that were trained on the MUCT database and some additional self-annotated images. The aim is to also provide a model builder for building your own facial models. The library requires ccv.js (for initial face detection) and numeric.js (for matrix math).

face

Requirements: JavaScript Framework
Demo: https://github.com/auduno/clmtrackr
License: MIT License

Cleverly Crop Your Images with Focal Point

Posted · Category: Capture, GPL License, MIT License

Design Shack has written a nice tutorial on Focal Point: Intelligent Cropping of Responsive Images, which is going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS.

Focal Point is a GitHub project and CSS framework created by Adam Bradley. The concept of responsive images requires that any images on your page resize and reflow to achieve optimal layout for the current viewport size. Focal Point takes this idea a step further though and not only resizes your images, but crops them as well.

focal-point-javascript

Requirements: CSS
Demo: http://designshack.net/articles/css/focal-point…
License: MIT, GPL v2 License

Experiments with Face Detection and Webcam Video

Posted · Category: Capture, License Free

With the getUser­Me­dia API, a video ele­ment, a can­vas ele­ment and LiuLiu’s excel­lent face detec­tion algo­rithm, we can eas­ily play around with web­cam video data in the browser, plug-in free.

Paul Hayes, the developer at Last.fm has created two fun exper­i­ments with face detection, canvas and webcam video. One places a mask over your face as you move and another that attempts to scale con­tent based on your dis­tance from the screen.

The face detec­tion only works some of the time. With busy back­grounds or low light con­di­tions the detec­tion fails more often. Some­times the wrong area is detected, which can lead to rad­i­cal and jar­ring shifts in the scale. Per­haps a rolling aver­age would be a bet­ter indi­ca­tion, alas he hasn’t built that.

face-detection

Requirements: -
Demo: http://www.paulrhayes.com/2012-11/fun-with-face-detection…
License: License Free

Create Thumbnails Easily with jQuery NailThumb Plugin

Posted · Category: Capture, GPL License

jQuery NailThumb helps you create thumbnails easily from high-res images, without any distortion, with one line of code. You can even decide thumbnail dimensions directly from CSS. Integrates prefectly with any media gallery, even more usefull in dynamic web application when you can face any shape or size.

If you want to add avatars to your application, it’s easier to use this plugin to let them fit any size you need, rather than to develop a functionality that restrict your user to upload avatars of the right size/sizes.

jquery-thumbnail

Requirements: jQuery Framework
Demo: http://www.garralab.com/nailthumb.php
License: GPL License

Take Screenshots of Webpages with HTML2Canvas

Posted · Category: Capture, License Free

html2canvas allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

It does not require any rendering from the server, as the whole image is created on the clients browser. However, for browsers without canvas support alternatives such as flashcanvas or ExplorerCanvas are necessary to create the image.

The script should work fine on the following browsers: Firefox 3.5+, Google Chrome, Newer versions of Opera, >=IE9 (Older versions compatible with the use of flashcanvas).

html-canvas

Requirements: Google Chrome 12, Firefox 4 and Opera 11.5
Demo: http://html2canvas.hertzen.com/screenshots.html
License: License Free

Easy jQuery Image Cropping with imgAreaSelect

Posted · Category: Capture, GPL License, MIT License

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes like those on Flickr.

imgAreaSelect is highly configurable and customizable with CSS styling. Keyboard support for moving and resizing the selection. It works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

image-crop

Requirements: jQuery Framework
Demo: http://odyniec.net/projects/imgareaselect/
License: MIT, GPL License

Bounce – Fast & Easy Contextual Visual Feedback Tool

Posted · Category: Capture, License Free

Millions of entrepreneurs struggle to communicate their ideas on a web product they’re working on. Fast, easy, specific, contextual visual feedback is crucial to creating killer products. Bounce opens up an ability to give visual feedback to everyone. And best of all, it’s free and there is no signup required.

You can make some notes for every screenshot you made on Bounce. Simply click anywhere on your screenshot, and type in what you want to say. You can also change the size and location of your note to highlight exactly what you want. You can share the screenshot easily, at the same time, they can make their own notes, save them, and bounce them!

bounce

Requirements: -
Demo: http://www.bounceapp.com/
License: License Free

Page 1 of 3123»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons