HTML – Download image through AJAX and display it

AJAX was initially designed to be used with text data (JSON/HTML/XML) and that is why this requirement of downloading images using AJAX were never fulfilled.

But with HTML5, XHR2 has been introduced which allows us to get ArrayBuffer in ajax response and this is something which can be used to download image.

There are two approaches that could be taken.

  1. Download the image, create a blob object and use it as src in img.
  2. Download the image, and create data url and use it as src in img.

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState==4 && xhr.status==200) {
        var blob = new Blob([xhr.response], {
            type: xhr.getResponseHeader("Content-Type")
        var imgUrl = window.URL.createObjectURL(blob);
        document.getElementById("img").src = imgUrl;
  xhr.responseType = "arraybuffer";"GET","Hacker.jpg",true);

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState==4 && xhr.status==200) {
        document.getElementById("img").src = "data:"+xhr.getResponseHeader("Content-Type")+";base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(xhr.response)));
  xhr.responseType = "arraybuffer";"GET","Hacker.jpg",true);

Know more about XHR2 look at


HTML, jQUERY find actual size of image in img tag

Basically using DOM functions, if we try and get the size of <img />, we always get the dimensions of DOM element, not the actual image.

To be able to get actual size of image, we will have to reload it in a new <img /> without any size restriction. If we do that, this new <img /> will take dimensions of actual image, and using simple DOM methods we can get the actual size of image.

Sample HTML

<img src="" width="480" height="300">

JS trick

function getImageSize(url, callback){
    $('<img />').attr('src', url).load(function(){
        callback(this.width, this.height);
getImageSize($("img").attr('src'), function(width, height){
        console.log(width, height);

Try this on JSFIDDLE.

HTML5 Update

HTML5 has introduced a much easier way of doing the same thing. If your browser supports HTML5, ignore the previous method and use this one.


JavaScript faster for loops

Assuming you want to traverse through an array using for-loop

var array = [...........]

Slow Way

    // TODO: Do Something

Fast Way

for(var i = 0; i < array.length; i++){
    // TODO: Do Something

Faster Way

for(var i = 0, len = array.length; i < len; i++){
    // TODO: Do Something


Get Apache & PHP working on Mac OS X 10.10 Yosemite

Three saviour commands

Start Apache
sudo apachectl start

Stop Apache
sudo apachectl stop

Restart Apache
sudo apachectl restart

Enable PHP
Open terminal and edit /etc/apache2/httpd.conf

sudo vi /etc/apache2/httpd.conf

Go to line # LoadModule php5_module libexec/apache2/ and remove # and save the file and restart the server.

Document Root
Document Root is the folder where PHP files are shared and executed. By default in Yosemite Document Root is set to /Library/WebServer/Documents.

To change it to your custom location edit the /etc/apache2/httpd.conf again and make following lines

  • change DocumentRoot "/Library/WebServer/Documents" to DocumentRoot "/your/path/to/shared/folder"
  • change <Directory "/Library/WebServer/Documents"> to <Directory "/your/path/to/shared/folder">

save the file and restart the server.

Android, open application on click of a URL.

Add following code in your AndroidManifest.xml tag.

        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:host="" />
        <data android:scheme="https" />
        <data android:scheme="http" />
        <data android:pathPattern=".*" />

Once the activity is launched, getIntent().getData() will give the URL for which your application was launched.

As per the above intent-filter. If the webpage contains

<a href="">Launch Application</a>

Click on this anchor would ask you to open the url in either browser or your application. In case your application is not installed on device, this url will continue to load in browser.