I have a reference how to load an image from a file:

/

but I don't know how to manually load the image by inputting or giving a string parameter that contains path file (e.g. C:\myImage\img12.jpg)

in the link, the image is directly load from the file dialog.

I have a reference how to load an image from a file:

http://jsfiddle/eD2Ez/31/

but I don't know how to manually load the image by inputting or giving a string parameter that contains path file (e.g. C:\myImage\img12.jpg)

in the link, the image is directly load from the file dialog.

• javascript
• jquery
• image
• html
• blob

• You just can't do that locally. Only server side languages can retrieve files from this server just by specifying a path in a string. Browser side file access can only be initiated by the user selecting a file. – devnull69 Commented Oct 2, 2012 at 7:44

2 Answers 2

Indeed, to my knowledge there is no established or even mildly known way to load local files programmatically due to security policies.

Aside from that you may want to use the onload handler on img to be sure that the image is loaded when you draw it on canvas. At the moment in some cases where the image is too big or the puter is slow you may not get the image rendered.

Check demo: http://jsfiddle/eD2Ez/38/

Experimental / Future

However, there could be a light on the horizon. There is something called FileSystem API in the works but didn't work for me (although it should).

Firstly the FileSystem API is currently implemented under vendor prefix on Chrome version 21+.

Also you have to use the flag --allow-file-access-from-files when you launch Chrome.

But even with all this, I still didn't manage to make it happen with Chrome v21 and still get SECURITY_ERR.

Check the "demo": http://jsfiddle/MQFGd/2/

Sources:

• MDN FileSystem API
• W3C FileSystem API
• FileSystem API tutorial

   $('<img src="'+img.src+'"/>').insertAfter('#cvs');

Here is demo http://jsfiddle/eD2Ez/32/