P5.js: CreateImg Fails if all 4 args present, works with 3 args!!

[bobcgausa]

Most appropriate sub-area of p5.js?

• [X ] Dom)

Details about the bug:

• p5.js version:
• Web browser and version:
• Operating System:
• Steps to reproduce this:
  

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

I'm unable to replicate this. Can you fill you the issue template?

The following examples works fine for me:

function setup() {
  createCanvas(400, 400);
  createImg(
    'https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg',
    'the p5 magenta asterisk',
    'anonymous',
    function(data){
      console.log(data);
    }
  );
}

[bobcgausa]

i copied the code into the error report. its there if you click edit but doesnt show in the summary
oddly enough, you example works but my image doesn't
my guess is that its the timeout on noload event

var imgr;
function setup() {
createCanvas(400, 400);
//remove noload string it works but spews err msg
createImg(
//'https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg',
'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png',
//'the p5 magenta asterisk',
'anonymous',
suc
);
}

function draw() {
background(200);
if (imgr!=undefined) image(imgr,0,0,200,200);
}

function suc(im){
im.hide();
imgr =im;
}

---

From: Kenneth Lim [e-mail]
Sent: Friday, August 21, 2020 4:05 PM
To: processing/p5.js [e-mail]
Cc: bobcgausa [e-mail]; Author [e-mail]
Subject: Re: [processing/p5.js] CreateImg Fails if all 4 args present, works with 3 args!! (#4759)

I'm unable to replicate this. Can you fill you the issue template?

The following examples works fine for me:

function setup() {
createCanvas(400, 400);
createImg(
'https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg',
'the p5 magenta asterisk',
'anonymous',
function(data){
console.log(data);
}
);
}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/processing/p5.js/issues/4759#issuecomment-678469380, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAUCTBHOHOKX62ZH2RG2TBDSB3HOZANCNFSM4QGLOSPQ.

[limzykenneth]

The image you are loading does not support cross origin request. You can download it and serve from your own server with cross origin enabled.

If you have further questions, do post them on the forum. Thanks.

[bobcgausa]

Then why does download work and image display when 2nd arg is omitted?On Aug 21, 2020 7:47 PM, Kenneth Lim [e-mail] wrote:
The image you are loading does not support cross origin request. You can download it and serve from your own server with cross origin enabled.
If you have further questions, do post them on the forum. Thanks.

—You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or unsubscribe.

[limzykenneth]

If the crossorigin argument is not set, it defaults to not requesting the image with cross origin policy.

[ffd8]

Ran into this issue now.. playing around with thispersondoesnotexist.com.

If I try loading a single image, no problem:

// global 'var img;' exists at top of code
img = createImg('https://www.thispersondoesnotexist.com/image?'+floor(random(999999)));
img.hide();

Hoped to grab a collection of images, so the plan was to push them into an array once loaded:

// global 'var imgs = []' as array exists at top of code
let img = createImg('https://www.thispersondoesnotexist.com/image?'+floor(random(9999)), "", "", function(im){
    im.hide();
    imgs.push(im);
})

Seems that CORS is no problem when not specifying that param on a request... when specified it fails– even with an empty string (in References it mentions with an empty string "CORS is not used", which was my hope... experimenting...

Just tried using null or undefined for that param = success!!

let img = createImg('https://www.thispersondoesnotexist.com/image?'+floor(random(9999)), "", null, function(im){
    im.hide();
    imgs.push(im);
})

Maybe the createImg function should also check that the length of the string is more than 0 before adding an elt.crossOrigin?

[limzykenneth]

What the parameter does is directly setting the crossorigin attribute on the <img> element created by the function and in the spec, an empty string is still a valid value (it gets treated as anonymous).

If you wish to not set the cross origin parameter and still use the callback, you can use null as you have done or just leave it out entirely (eg. createImg(URL, "", function(){}). The implementation of createImg has accounted for that signature.

[ffd8]

Aha – I didn't see that one could also just give the callback function without the alt and crossOrgin! Based on the 2 syntax examples, seemed like it was all or none, especially as alt, crossOrigin weren't listed as optional.