How do I display an (svg) image?

phrosen

Hello.

I am trying to display an image (.svg) using p5.js

I saw this example site: p5js.org/examples/image-load-and-display-image.html and tried using that code.

However, I'm getting an error saying: "Access to Image at 'file://blabla/bla/snowflake.svg' from origin 'file://' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access."

(I read on the example site above that I need to use a local server.)

Is there any way to do this without using a local server, and without changing my browsers policies? (I know it can be done using regular HTML 5 Canvas JS, so I'm thinking P5.js should be able to do it too?)

Thanks in advance.

kfrajer

I think they suppose to be three slashes "file:///..."

Try that and see if it works. another way to test your access to the file, copy and paste the URL right into your browser. It should load it. If it doesn't... browser policies could be the culprit.

Kf

Lord_of_the_Galaxy

Why can't you just store the image locally in the same folder as the html file?

GoToLoop

https://forum.Processing.org/two/discussions/tagged/cors

kfrajer

@GoToLoop What is CORS? (maybe more people will run into this issue and we can have it describe here in this post?)

Kf

phrosen

@Lord_of_the_Galaxy I would if that would solve the issue. How do I do that? (What code do I use?)

I forgot to mention in my first post: I'm using Google Chrome.

GoToLoop

https://en.Wikipedia.org/wiki/Cross-origin_resource_sharing

GoToLoop

How do I do that? (What code do I use?)

Either you're trying to download a remote file w/o CORS enabled there or you're trying to run your sketch w/o a server under a non-Firefox-based browser. :-??

phrosen

@GoToLoop All I'm trying to do is to show a picture (using P5.js) that's saved locally on my computer. I know this can be done with regular javascript, so why can't it be done with P5?

GoToLoop

Easiest fix: Use Firefox! $-)

jeremydouglass

All I'm trying to do is to show a picture (using P5.js) that's saved locally on my computer.

Briefly -- over the past few years, most browsers have made it increasingly difficult (by default) for code running in a browser window to access almost anything on the user computer. This is e.g. to prevent javascript from stealing your credit card number... or valuable SVG files.

phrosen

@jeremydouglass so the answer is: it can't be done with P5 and I should just stick to regular JS for this?

jeremydouglass

If you are getting "file://' has been blocked by CORS policy" then I believe that no javascript will be able to load from file using that browser if the javascript is being run from that URL, as it is "cross-origin" (JS is running on a different "origin" than where the image is). That's your browser, not p5. Read the "Cross-origin" link.

phrosen

@jeremydouglass

` var img;

function setup(){ var canvas=document.querySelector("canvas"); var ctx=canvas.getContext("2d");

createCanvas(600,600).parent("canvasContainer");

img=new Image();

img.addEventListener("load", function(){
    ctx.drawImage(img, 0,0,canvas.width,canvas.height);
}, false);

img.src='imgs/snowflake.svg';

}

function draw(){ background(51); noLoop(); } `

This works. This is what I call "Regular JS", as in no P5. EDIT: But the god damn code tags on this website doesn't work.. The important stuff gets highlighted anyway..

jeremydouglass

And you are running both the regular js and the p5.js locally, not through a webserver? And both in the same browser? And both are using 'imgs/snowflake.svg' -- one isn't using file (vs. http, etc.)?

phrosen

@jeremydouglass Yes, I am running both regular js and p5.js locally. Both in the same browser (Google Chrome). Both using the same file and search path (imgs/snowflake.svg). I did not catch the last thing you said.

I am guessing that P5 automatically adds all this 'file://' crap when using the Image function. (Not to be confused with the regular js's drawImage function - which, I believe, does not add the 'file://' crap.)

GoToLoop

https://ThimbleProjects.org/gotoloop/97931/index.html:

<script async src=https://p5js.org/assets/js/p5.min.js></script>
<script defer src=sketch.js></script>

https://ThimbleProjects.org/gotoloop/97931/sketch.js:

/**
 * Preload Image Masks (v2.0.3)
 * ThinSoldier & GoToLoop (2016-Sep-08)
 *
 * forum.Processing.org/two/discussion/18109/
 * how-can-i-clone-an-image-object#Item_3
 *
 * ThimbleProjects.org/gotoloop/97931
 */

"use strict";

const SUBFOLDER = 'assets/';
let original, masker, masked;

function preload() {
  original = loadImage(SUBFOLDER + 'moonwalk.jpg');
  masker = loadImage(SUBFOLDER + 'mask.png');
}

function setup() {
  createCanvas(original.width, original.height);
  ( masked = original.get() ).mask(masker);
}

function draw() {
  background(original);
  image(masked, mouseX - width*.5, mouseY - height*.5);
}

https://ThimbleProjects.org/gotoloop/97931/assets/moonwalk.jpg
https://ThimbleProjects.org/gotoloop/97931/assets/mask.png

Lord_of_the_Galaxy

@GoToLoop what does let in line 14 do?
Anyways, @GoToLoop's previous post is what I was talking about - put the image in the same folder as index.html (or any subfolders, or more correctly, use relative links).

Lord_of_the_Galaxy

@GoToLoop the link you gave opens a blank page on my iPad.

GoToLoop

... the link you gave opens a blank page on my iPad.

Dunno what it might be. Just re-clicked at all of those 4 links I've posted, using my Chrome-based browser, and they've all worked well. 8-|

GoToLoop

... what does let in line 14 do?

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Lord_of_the_Galaxy

@GoToLoop By "the link" I meant the html file, the others work properly.

GoToLoop

That "index.html" file is just the minimum to kickstart both "p5.min.js" library and its "sketch.js".

Maybe iPad's default browser is more demanding than all the other browsers? 3:-O

GoToLoop

Perhaps it can't run ES6 JS? b-(

Lord_of_the_Galaxy

Maybe Safari (iPad default browser) requires the html file to be complete with head, title and body?

GoToLoop

My examples are mostly targeted at devs like us.
If at least they work under a Chrome & a Firefox based browser, it's enough for me.
Full compatibility to all browsers can be done later when it's ready to general deploy.
Till then, grab another more apt browser to test dev codes. ;;)

Lord_of_the_Galaxy

Ok

kfrajer

@GoToLoop

https://ThimbleProjects.org/gotoloop/97931/sketch.js

I was trying to get your provided sample running. I got it running once before and I could see the effect of displaying the mask. Right now it only displays the background jpeg image. Did something change?

Kf

GoToLoop

@kfrajer, latest version for "Preload Image Masks" is still v2.0.3 from 2016-Sep-08!
Indeed, something bad just happened to https://p5js.org/assets/js/p5.min.js today. @-)

You see, my hosted sketch grabs p5.js library directly from its site. :ar!
Today that version is: /*! p5.js v0.5.4 October 27, 2016 */

However, if I change it to /*! p5.js v0.5.4 October 01, 2016 */ from:
https://cdnjs.CloudFlare.com/ajax/libs/p5.js/0.5.4/p5.min.js
It works once again just like yesterday! :-\"

There's also version /*! p5.js v0.5.5 December 05, 2016 */: :-bd
https://cdnjs.CloudFlare.com/ajax/libs/p5.js/0.5.5/p5.min.js

I won't change the hosted "index.html" file. Gonna w8 for them to update their "p5.min.js". I-)
For now, if you wanna run the "sketch.js", you're gonna do it locally or hosted somewhere else: :-<

<!--<script src=https://p5js.org/assets/js/p5.min.js></script>-->
<script src=https://cdnjs.CloudFlare.com/ajax/libs/p5.js/0.5.5/p5.min.js></script>
<script src=sketch.js></script>

jeremydouglass

something bad just happened to https://p5js.org/assets/js/p5.min.js today.

@GoToLoop -- did you report it to p5.js Issues https://github.com/processing/p5.js/issues -- or do you know that they already know about it?

GoToLoop

I'm barred to post anything there. :-&
And anywayz, it's more a site issue, given more updated versions are available to the p5.js library already. (:|

Lord_of_the_Galaxy

@GoToLoop Barred, why?

GoToLoop

Let's just say they only accept "flowery" words. :O)

jeremydouglass

If there is an issue that needs submitting, let me know. I'm pretty flowery.

Lord_of_the_Galaxy

People don't seem to like straightforward criticism.

GoToLoop

I confess I do criticism a lot! X_X
But what I've meant by "flowery" goes beyond that though.

They seem to censorship half of the dictionary! :-q
Check it out what she's said about the word "abysmal" and etc.:
https://GitHub.com/processing/p5.js/issues/622#issuecomment-104263606

however, i do ask that you please be careful about using words like "abysmal" etc.

And this 1 for "sexy": @-)
https://GitHub.com/processing/p5.js/issues/879

I've written a center() function on the p5.Element that makes it fast and sexy to center elements to their parents.

I thought some1 would show up and say that perhaps "sexy" was an "unappropriated" word and such.
But lo & behold, the reason stated is b/c it could make some folks think they don't belong to the group somehow! 8-}

but it might be good to avoid using "sexy" as a code descriptor; can feel non-inclusive depending on who's reading.

Lord_of_the_Galaxy

It seems like they prefer "flowery" people to ordinary ones.

GoToLoop

Just passing by to announce that my hosted example is back working: <:-P
https://ThimbleProjects.org/gotoloop/97931/

Today they've finally upgraded the /*! p5.js v0.5.4 October 27, 2016 */ defective version.
To latest /*! p5.js v0.5.5 December 05, 2016 */ version. B-)

https://p5js.org/assets/js/p5.min.js

jeremydouglass

One guess would be that, because Processing is also an educational language aimed at a wide audience (including children), people are sensitive to public language when talking about the project because it encourages a mixed audience with people of all backgrounds and all ages. You may be filing a bug report, but you are doing it while standing in both a university and an elementary school classroom.

jeremydouglass

@GoToLoop -- great! Thanks for letting us know it is working. And no bug report required. :)

Lord_of_the_Galaxy

Well, I just thought that elementary school children won't be learning Processing, and secondary/high school children who may be learning Processing won't really care.

jeremydouglass

Well, for just one example KhanAcademy hosts an intro to CS that is ProcessingJS based, and that definitely targets a wide age range.

https://www.khanacademy.org/computing/computer-programming

I'm not saying it is Scratch, mind you, just a very broad audience. The intro materials are clearly meant to be accessible for advanced elementary students.

https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro

It makes sense to me, really. I first started typing lines in BASIC when I was extremely young.

http://dan.folkes.me/2013/02/27/teaching-kids-to-code-processing-org/

Lord_of_the_Galaxy

Oh, well, some people are more children-friendly than others.

phrosen

Stop chatting in this thread. You're spamming me with email-notifications!

EDIT: Need a moderator to close this thread.