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

Oni

try using the html5 file api: developer.mozilla.org/en/Using_files_from_web_applications – Patriliny

Answer 1

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 *

Ruisdael

Thanks Mark. Not adverse to using other client-side technology providing it provides the required functionality, though JavaScript is preferential. – Oni

Check this blueimp.github.com/JavaScript-Load-Image, it's using URL, FileReader API – Fag

Answer 2

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

Likeminded

This is a link only answer. Answers should be explained here, not in a external link. Links should be only to support an explanation, not the only thing provided in the answer, since it can go offline at anytime. – Qadi

Answer 3

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

Isopropyl