Create Website Thumbnails using PhantomJS


Hits: 9293  

Hope you read my old article “Create WebThumb using LAMP”, it used for creating web thumbnails from Xvfb virtual framebuffer that is more time and resource consuming.

Shell Script with Xvfb try to open web browsers in real remote server to capture web-thumbs…

That whole setup might take a full day and image quality is very bad….

Thanks to PhantomJS

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Simple Javascript example

console.log(‘Loading a web page’);
var page = require(‘webpage’).create();
var url = ‘http://www.svnlabs.com/’;
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});

Features:

– Headless Website Testing
– Screen Capture
– Page Automation
– Network Monitoring

Fork on Github https://github.com/ariya/phantomjs

PhantomJS is using WebKit for a real layout and rendering engine, it can be used to capture web page as screenshot or PDF files. PhantomJS can render anything on the web page, it can be used to convert contents in HTML/CSS, SVG and Canvas.

URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
// Thumbnail of Webpage using webthumb.js

var page = require('webpage').create(),
    system = require('system'),
    weblink,
    fname;

if (system.args.length !== 3) {
    console.log('Usage: webthumb.js webURL filename');
    console.log('Usage: webthumb.js http://www.svnlabs.com svnlabs.png');
    phantom.exit(1);
} else {
    weblink = system.args[1];
    fname = system.args[2];    
    page.viewportSize = { width: 320, height: 480 };
    page.open(weblink, function (status) {
    if (status !== 'success') {
        console.log('Unable to open webpage!');
    } else {
        page.render(fname);
    }
    window.setTimeout(function () {
      phantom.exit();
    }, 3000);
    });
}

Download webthumb.js

# phantomjs webthumb.js http://www.svnlabs.com svnlabs.png
# phantomjs webthumb.js http://www.svnlabs.com svnlabs.pdf

You can even capture webpage as good quality PDF file 😉

Output:

svnlabs.png
svnlabs.pdf

You can also use examples/rasterize.js for same sort of functions 😉

# phantomjs examples/rasterize.js http://www.svnlabs.com/ svnlabs.png
# phantomjs examples/rasterize.js ‘http://www.svnlabs.com/’ svnlabs.pdf

rasterize.js – rasterizes a web page to image or PDF
render_multi_url.js – renders multiple web pages to images
technews.js – captures Google News as a PNG image

Best Websites To Watch Movies Online For Free


Hits: 19314  

Hey, Everyone need to spend their weekends with family & friends… I always watch movies on Saturdays. I know you are also searching for free movies online. I have few websites where you can spend your best time to watch best blockbuster movies.

HTML5 MP3 Lyrics Player


Hits: 6277  

HTML5 Lyrics Karaoke Player Plugin enable wordpress users to sing and play song text lyrics.

Free Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Social Links Facebook / Twitter
  • Works in IE, Safari, Firefox, Chrome, Opera
  • Player have shortcode for post/page [html5lyrics id=ID] i.e. [html5lyrics id=1]

Paid Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Support Images on song’s cue points
  • Color / Size Customization
  • Supports Unicode
  • Social Link Customization
  • Multiple player on same page / post
  • Works in IE, Safari, Firefox, Chrome, Opera, mobile devices including Android/iOS
  • Supports Wowza / Amazon Cloud Front / S3 HTTP Streaming
  • Facebook page customization with player
  • Player have shortcode for post/page [html5lyrics id=ID … ] i.e. [html5lyrics id=1 … ]
  • Best support on email / skype

Note: 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.

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.

It has been verified to work across:

– Mobile Safari (iOS 3+)
– Android (2.2+, w/Flash), Android (4.0+)
– Safari (4+)
– Chrome (7+)
– Firefox (3+, w/ Flash)
– Opera (10+, w/ Flash)
– IE (6, 7, 8, w/ Flash)

Get fully customized HTML5 Lyrics Karaoke Player for Website Buy Now or Contact Us

Standalone

Credit

Audio.js Player

HTML5 Audio Read-Along

HTML5 Video Canvas to Capture Image Frames


Hits: 11943  

Mobile will continue to be the big trends in 2013 because more users accessing websites on mobile devices. HTML5 Canvas help you for optimizing your site and video ads for mobile will become increasingly important.

Video to Canvas Capture
Video to Canvas Capture

canvas2image – A tool for saving or converting canvas as images 😉

HTML5 Video to Image gallery is very easy using HTML5 Video Canvas. CSS Sprite Animation can be used on various mobile ads solution application.

video canvas image gallery sprite animation
video canvas image gallery sprite animation

HTML5 Video Canvas to Capture Image is good tool to extract frames on Image Canvas. FFMpeg Video Image is not useful in real-time image capture.

imgs.appendChild(Canvas2Image.convertToImage(canvasFromVideo, 300, 200, ‘png’));

Demo: http://demo.svnlabs.com/html5videocapture/

Download: http://demo.svnlabs.com/html5videocapture/html5videocapture.zip

PHP Colorize an image using GD


Hits: 3139  

I was working for color customization for HTML5 MP3 Player with Playlist

Finally, I have time saving code for you PHP Colorize an image using GD

<?php

//print_r(html2rgb("#ffffff"));
//echo rgb2html(137, 113, 79); 

$color=isset($_REQUEST['color'])?$_REQUEST['color']:"ff00ff";
$image=isset($_REQUEST['image'])?$_REQUEST['image']:"2.jpg";

$rgb= html2rgb("#".$color);

$imgname=$image;
         
    $im=imagecreatefromjpeg($imgname);
    if($im&& imagefilter($im, IMG_FILTER_COLORIZE,$rgb[0],$rgb[1],$rgb[2]))
    {
         
         header("Content-Type: image/jpeg");
         imagejpeg($im);
         
         //imagejpeg($im, 'output.jpg'); 
         //imagedestroy($im); 
    }
   else
   {
        echo'Processing failed.';
   }
   

function rgb2html($r,$g=-1,$b=-1)
{
    if(is_array($r)&&sizeof($r)==3)
        list($r,$g,$b)=$r;

    $r=intval($r);$g=intval($g);
    $b=intval($b);

    $r=dechex($r<0?0:($r>255?255:$r));
    $g=dechex($g<0?0:($g>255?255:$g));
    $b=dechex($b<0?0:($b>255?255:$b));

    $color=(strlen($r)<2?'0':'').$r;
    $color.=(strlen($g)<2?'0':'').$g;
    $color.=(strlen($b)<2?'0':'').$b;
    return'#'.$color;
}

function html2rgb($color)
{
    if($color[0]=='#')
        $color=substr($color,1);

    if(strlen($color)==6)
        list($r,$g,$b)=array($color[0].$color[1],$color[2].$color[3],$color[4].$color[5]);
    elseif(strlen($color)==3)
        list($r,$g,$b)=array($color[0].$color[0],$color[1].$color[1],$color[2].$color[2]);
    else
        returnfalse;

    $r=hexdec($r);$g=hexdec($g);$b=hexdec($b);

    returnarray($r,$g,$b);
}

   
   
?>

The above code will work for JPG image files, you can optimize for other image formats 😉

=>

MIME Types List


Hits: 3614  

MIME stands for “Multipurpose Internet Mail Extensions”. It’s a way of identifying files on the Internet according to their nature and format. “Content-type” header value defined in the HTTP response, the browser can open the file with the proper extension/plugin/tool.

“Internet Media Type” is the same as a MIME type. MIME types were originally created for emails sent using the SMTP protocol.

The “Content-type” is simply a header defined in many protocols, such as HTTP, that makes use of MIME types to specify the nature of the file currently being handled.

Content-type Header

Setting the Content-type in ASP:
<% response.ContentType="text/html" %>

Setting the Content-type in C#:
response.ContentType = “text/plain”;

Setting the Content-type in Java:
response.setContentType(“text/plain”);

Setting the Content-type in Perl/CGI:
print “Content-type:text/html”;

Setting the Content-type in PHP:

<?php header('Content-type: text/html');?>

 

Better Understanding:

The “x-” prefix of a MIME subtype simply means not registered with the “Internet Assigned Numbers Authority”.

The “vnd” prefix means that the MIME value is vendor specific.

 

Download List of MIME types / Internet Media Types

PHP Mime Header for M3U8 iOS media streams..
header(“content-type: application/vnd.apple.mpegurl”);

 

Convert HTML Table to CSV / Excel using HTML2CSV.

Image Matrix Using ImageMagick


Hits: 5169  

ImageMagick create, edit, compose, or convert bitmap images. It can read and write images in different formats including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF.

Image Operations

* Resize
* Flip
* Mirror
* Rotate
* Distort
* Shear
* Transform
* Adjust image colors
* Special Effects
* Draw text, lines, polygons, ellipses.

ImageMagick utilities to create, edit, compose, or convert images from the command-line.

* animate – animate an image sequence on any X server.

* compare – mathematically and visually annotate the difference between an image and its reconstruction.

* composite – overlap one image over another.

* conjure – interpret and execute scripts written in the Magick Scripting Language.

* convert – convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.

* display – display an image or image sequence on any X server.

* identify – describe the format and characteristics of one or more image files.

* import – save any visible window on an X server and outputs it as an image file. You can capture a single window, the entire screen, or any rectangular portion of the screen.

* mogrify – resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. Mogrify overwrites the original image file, whereas, convert writes to a different image file.

* montage – create a composite image by combining several separate images. The images are tiled on the composite image optionally adorned with a border, frame, image name, and more.

* stream – a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats. It writes the pixel components as they are read from the input image a row at a time making stream desirable when working with large images or when you require raw pixel components.

Install ImageMagick

# yum install ImageMagick ImageMagick-devel

Image Matrix

# montage H.jpg A.jpg P.jpg P1.jpg Y.jpg H1.jpg O.jpg L.jpg I.jpg \
                      -mode Concatenate -tile 1×10 HOLI.jpg

 

 

# montage H.jpg A.jpg P.jpg P1.jpg Y.jpg \
                       H1.jpg O.jpg L.jpg I.jpg \
                       -mode Concatenate -tile 5x HAPPYHOLI.jpg

 

Valentine’s Day express love with your website


Hits: 3930  

Express love with your website on Saint Valentine’s Day.

Fan Page on Facebook

WordPress Plugin

Add to Your Fan Page Tab 

Work hard, but make time for your love, and family. Nobody remembers PowerPoint presentations on ur dying day…. 🙁

Remote Secure Token


Hits: 6216  

Remote Secure Token

Wowza Token
We already compiled FlowPlayer & JWPlayer for remote secure token in flex / flash files 😉
http://blog.svnlabs.com/compile-or-build-flowplayer-or-jwplayer-to-create-secure-token-for-wowza-server/
http://blog.svnlabs.com/wowza-mediasecurity-addon-package/
http://blog.svnlabs.com/how-to-prevent-downloading-and-leeching-media-files/ (hotlink protection)

Local Media Files
We already protected local files using .htaccess file media hiding logic 😉
http://blog.svnlabs.com/secure-token-plugin-with-php/
http://blog.svnlabs.com/how-to-prevent-downloading-and-leeching-media-files/ (hotlink protection)

External Media Files
File can be protected both on server side and client side….

Server side: Media files can be protected from media server like wowza using security token addons

Client Side: Usually video/media files played using flash / flex based players so … if media links are hidden inside flash and also flash player files are protected from theft 😉

HTTP files like http://mediaelementjs.com/media/echo-hereweare.mp4 can be protected from hack using temporary PHP file that will be responsible for carrying external media file / link to flash player in encrypted version and temporary file will be using expired token as parameter or domain restriction.

http://domain.com/rst.php?media=http://mediaelementjs.com/media/echo-hereweare.mp4 (Plain)

http://domain.com/rst.php?media=d3d3Lmpvb21sYW1hbmFnZXJzLmNvbQ&token=1sYW1hbmFnZXJ
(encrypted)

http://domain.com/rst.php?param=d3d3Lmpvb21sYW1hbmFnZXJzLmNvbQ1sYW1hbmFnZXJ
(top encrypted link can be passed to media player)

RTMP files ( rtmp://xx.iy.iz.iq/media.mp4 ) are more secure inside flash player action scripts.

The fool proof security always inside Flash Players but I am still searching for iOS media security 🙁