How to upload an image from a URL?

p5.js Beginners
1

Hi, I tried to upload an image from a URL, but from what I see it doesn’t work, only for images that I place locally.

The purpose of uploading images using URL is because in the JSON I receive it contains their URL.

Example:

let img;

function preload () {
  img = 'https://digimon.shadowsmith.com/img/koromon.jpg';
}
function setup () {
   createCanvas (400, 400);
   image (img, 0, 0, width, height);
}

function draw () {
   background (220);
}

This produces the error:

Uncaught TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’ (sketch: line 8)

The image command (img, 0, 0, width, height) should accept the URL parameter as well, not just local referencing.

1 Like
2

You‘re not setting the img variable correctly. You have to either use loadImage(URL) or createImage(URL).

The image() accepts image data, which can be any of the types mentioned in the error, but that‘s not what you‘re providing.

3

Using with LoadImage also ends up giving an error:

let img;
function preload () {
img = loadImage ('https://digimon.shadowsmith.com/img/koromon.jpg');
}

function setup () {
createCanvas (400, 400);
image (img, 0, 0, width, height);
}

function draw () {
background (220);
}

The error that da is this:

p5.js says: It looks like there was a problem loading your image. Try checking if the file path [https://digimon.shadowsmith.com/img/koromon.jpg] is correct, hosting the image online, or running a local server. [Https://github.com/processing/p5. js / wiki / Local-server]
Event {isTrusted: true, constructor: Object}

1 Like
4

i had problems to load it in my browser.
so better:

  • download it to your PC
  • upload it to your project
  • link to the file ( in preload )

https://editor.p5js.org/kll/sketches/JuGdFxtgh

5

Hello friend, this way it works smoothly, but that’s not what I want.
I want to upload the image with just the URL, not using it locally … why do I want this ??, why do I get the URL path via JSON, so I need it to work with the URL.

1 Like
6

to load after setup… try the
https://p5js.org/reference/#/p5/loadImage
with the callback

Syntax

loadImage(path, [successCallback], [failureCallback])

example ( but does not help ) see link above, modified version

7

Using it that way doesn’t work either.
And the problem is not the image, why using another of the same. I’m starting to believe this is an uncataloged bug.

let img;
function setup () {
  createCanvas (400, 400);
  loadImage('https://digimon.shadowsmith.com/img/koromon.jpg', img => {
    image(img, 0, 0, width, height);
  });
}

function draw () {
  background (220);
}
8

look in your inspect console
( i am on win 10 / browser firefox )

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://digimon.shadowsmith.com/img/koromon.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

and search here the forum about that

2 Likes
9

I installed the chrome allow cors extension, now this code worked above.

I had forgotten about this part of cors, these browsers of today …
Thank you my friend, now we will be able to display images coming from API.

1 Like