Load local image into browser using JavaScript?

Question

I'm currently developing a solution for a web-to-print, poster printing application.

One of features I'd like to include is the ability to 'edit' (crop/scale/rotate) a given image, before proceeding to order a poster of said image.

To avoid the requirement of the user uploading the image to a remote server before editing, I'd like to know the following:

Is it possible (using JavaScript) to load an image stored on the client machine into the browser / browser memory for editing, without uploading the image to a remote server? And if so, how is this done?

Thanks,

BK

Answer 1

Yes you can! But in order to do it the browser must support Local storage! It is HTML5 api so most modern browsers will be able to do it! Remember that localstorage can save only string data so you must change images into a blob string. YOur image source will look something like this

This is a short snippet that will help you!

                if(typeof(Storage)!=="undefined"){

                // here you can use the localstorage
                // is statement checks if the image is in localstorage as a blob string
                if(localStorage.getItem("wall_blue") !== null){

                var globalHolder = document.getElementById('globalHolder');
                var wall = localStorage.getItem('wall_blue');
                globalHolder.style.backgroundImage= "url("+wall+")";


                 }else{

                // if the image is not saved as blob in local storage
                // save it for the future by the use of canvas api and toDataUrl method
                var img = new Image();
                img.src = 'images/walls/wall_blue.png';
                img.onload = function () {

                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);
                var dataURL = canvas.toDataURL();
                localStorage.setItem('wall_blue', dataURL);

                };

            }}else{//here  you upload the image without local storage }

Hope you will find this short snippet useful. Remember Localstorage saves only string data so you cant

Oh and by the way if you are using a jcrop for cropping the images you have to save the blob code from image to the form and send it to the server manually because jcrop only handles images as a file not as a base64 string.

Good luck! :D

Answer 2

I'm just trying to do it, but with chrome I receive this message:

Not allowed to load local resource: file:///C:/fakepath/1.jpg

when I do this:

$img = new Image();
$img.src = $('#f').val();
$img.onLoad = function (){
    alert('ok');
}

Answer 3

Using Html/Javascript you can only select files using the file upload html component (I think Flash / Silverlight wrap this to make things easier but its still sandboxed)

You can however use Java Applets (orwhatever they are called these days), Native ActiveX controls or .Net Controls to provide additional functionality (this hase security implications and required VM/Runtimes Frameworks etc)

Adobe Air or other client side technology might work, but looks like you want to do this in JavaScript. In this case, uploading the file to the server and manipulating from there is the best bet.

*[EDIT] Since 2010, since this question was answered, technology has moved on, html now has the ability to create and manipulate within the browser. see newer answers or these examples: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

Answer 4

The image can be edited without the user needed to upload the image to the server.

Take a look at the link below. It can be done quite easily.

Reading local files using Javascript