How to gain access to local images in JavaScript/p5.js/HTML - javascript

I want to display an image file from a local folder in JavaScript (p5.js). Every time I try I get: Access to image at "XXXXX" from origin "null" has been block by CORS policy: The response is invalid.
The HTML, js and images are all inside a file tree, inside the media server's project folder.
They HAVE to be run locally. Running from any other location than the folder they are in is not an option (referring to a lot of answers talking about running a web server.
function setup() {
createCanvas(96, 192);
img = loadImage('images/square1-01.png'); // Load the image
}
function draw() {
image(img, 0, 0);
}
//ALSO TRIED
img = loadImage('file://images/square1-01.png'); // Load the image
The above text is a super simplified version that I isolated from the main file so I could run it standalone, just so I could get to the point of getting an image, before I started adding in the other layers of complexity.
Thus the layout is entirely from a tutorial.
Relevant files are:
.../web/d3test.html
.../web/d3test.js
.../web/images/square1-01
.../web/images/square2-01
.../web/images/square3-01

JavaScript is blocked from accessing local files like this, for security reasons. You wouldn't want every website snooping through the files on your hard drive. That's what's causing your error.
Instead of accessing files on your local hard drive, you need to access files from a web server. You could upload your your sketch (along with your images) to a web host. Shameless self-promotion: here is a tutorial that introduces some options for hosting.
You could also use the P5.js editor. This is a free editor for P5.js that automatically uploads everything to a web host. Your could should work fine there.
You could also run your own local web server.
If you really, really, really need to run this without a web server, then you can try the File API described in this answer or find a setting in your browser described in this answer.

Related

JavaScript - Image src from local file linux

I have a server running serving a HTML page and would like to serve an image residing in a local drive in Linux. I read that I can get that to work with appending file://... However, it doesn't seem to work in my case and I am suspecting that it might not work in my machine (Ubuntu 18.04). There's no error arose, just the img doesn't seem to find the image.
<img src="file:///home/my_user/my_picture.png">
Image result from code snippet above:
In this thread, I found an answer saying that the modern browser doesn't allow to serve local file for security reason.
If this is the case, is there any alternative for this?
I am thinking of passing the image byte data to the client and let the client-side javascript construct the image. But, my concern is the performance issue when there are a lot of image to be transferred. Also, I think it's quite ugly since the client is guaranteed to be in the same machine as the server.
The file:/// is for local files - that is the files in the computer where the browser runs.
If you want to load the files which are not in your public folder of the server,
You can mount the image folder inside the public folder
Create a route in your server which would resolve the image requests to the image folder
If you're loading imgs with the file:/// protocol, those files are on the client-side machine, not your server machine. And you wouldn't know the path of an image on the client-side machine, because every client's machine is different.
Then if the image that is yours, not the client's, you obviously have to somehow transfer it to them, even if there're abandon, or just 1 image.
Of course, you could optimize the transferring process with variant methods, like transferring base-64 byte data, shrink the size of the images, use different servers to transferring images than the code server, etc. But one way or another, you have to somehow transfer it to them.
the client is guaranteed to be in the same machine as the server
How could a client be guaranteed to be in the same machine as the server? Is it an app you deliberately downloaded? If it's a browser, it can be any arbitrary site on the internet. So your sentence is not in the context of the browser.
If you want to read the client's images, you have to let them select which image they allowed you to read, via File Reader, try the snippet below.
function showpreview(e) {
var reader = new FileReader();
reader.onload = function (e) {
document.querySelector('img').src = e.target.result;
}
//Imagepath.files[0] is blob type
reader.readAsDataURL(e.files[0]);
}
<img style="width: 100vw" src="" alt="">
<input type="file" onchange='showpreview(this)'>

Javascript examples found on severial sites regarding fopen is not working for me

I am trying to read a text file that is in the same directory as my html file using javascript so that I might include the contents of the text file in my html file.
Here is the code I have to test the fopen and fread functions
<html>
<head>
</head>
<body>
<script>
fh = fopen('my.txt', 0); // Open the file for reading.
if(fh!=-1) // Check if the file has been successfully opened.
{
length = flength(fh); // Get the length of the file.
str = fread(fh, length); // Read in the entire file.
fclose(fh); // Close the file.
// Display the contents of the file.
write(str);
}
</script>
</body>
</html>
I've tried replacing the 'write' with document.write and still nothing.
Here are some websites that had this code as an example:
http://answers.yahoo.com/question/index?qid=20130519190823AA2lQ1W
http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm
Any help at all would be much appreciated.
Thank you!
Javascript has no filesystem access. As it is mentioned in the second link you posted,
you will need to install special plugins in order to give JS file system access.
I don't think it is the right way to accomplish whatever you are trying to do.
In order to access client's filesystem, the popular way I've seen is using Flash or Java applet or Microsoft Silverlight for that matter.
For accessing your server filesystem, you will need to run a web server which has proper permissions to access the filesystem. Then, you can make AJAX calls to the web server, which in turn will fetch the file for you.
As Apoorv said, JavaScript has no filesystem access. But I think it is important to consider why that is. Or rather, ask yourself, would you go to a website that could access files on your machine?
Functions like fopen is not defined in web browsers. You cannot access file system from javascript. Either have to do something like this: Question
or load your files with ajax
Either way you cannot load file's from viewer's computer, only from your server.
Again either way trying to load from a different server will also result in cross origin related limitations.

Trying to limit access to SWF files with FlexPaper

I'm trying to prevent users from downloading or accessing SWF files on my server. Using FlexPaper, the embed code looks something like this:
$('#documentViewer').FlexPaperViewer({ config : {
SwfFile : 'swf/File.swf',
// etc.
}});
The problem is, obviously, that people can view the source and go directly to the swf file, which I'm trying to prevent. Is there any way around this?
Rule #1 of the internet - of you don't want people "stealing" it, don't put it online.
That being said, you can set up a file proxy, where the file is outside of the web root. A request is make to a server-side file with the filename which then spits out a MIME header and streams your file. How you do this depends on your server-side language preferences.
It would look something like this:
SwfFile : 'serveFile.php?File.swf',
There are many plug-ins that will allow people to save the file to their local systems from the page, regardless of what you do so you need to balance your efforts against the forces of futility.

jQuery/JavaScript read image/files from path file

I have a reference how to load an image from a file:
http://jsfiddle.net/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.
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 computer is slow you may not get the image rendered.
Check demo: http://jsfiddle.net/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.net/MQFGd/2/
Sources:
MDN FileSystem API
W3C FileSystem API
FileSystem API tutorial
$('<img src="'+img.src+'"/>').insertAfter('#cvs');
Here is demo http://jsfiddle.net/eD2Ez/32/

loading local file using javascript

I am attempting to use a javascript function to load a local file in my WP7 project. So far the following code works but it loads an image file from a web address instead of a local directory in my WP7 application ( Resources/Icons/appbar.go.rest.png). I have researched everywher to load a local image file properly from a local directory in my project but have yet to be successful. My code is as follows
Javascript
var body = document.getElementsByTagName("body")[0];
var s = document.createElement("input");
/loads image file from web address
s.src = "http://www.gravatar.com/avatar/a4d1ef03af32c9db6ee014c3eb11bdf6? s=32&d=identicon&r=PG";
s.type = "image";
body.appendChild(s);
As I said the above code works, but I would like to use a local image file in my project rather than the web address above. Does anyone know how to correctly implement this solution?
you can read this article which provide a solution by using WebClient:
Operating with image files in a Windows Phone 7 application
http://dotnet.dzone.com/articles/operating-image-files-windows
jQuery .load() method can load files well, but unfortunately I haven't used it on windows phone 7 environment which saves files on its Local Storage.
http://api.jquery.com/load/
You can't load the image directly from the clien't machine (remember that that javascript peace of code will run on the client's local machine). You should serve the image file as you are serving the Javascript file, then point 'src' there.

Categories

Resources