[p5] loadImage : How to load an image from an internet URL

p5.js Coding Questions
1

[p5] loadImage : How to load an image from an internet URL

let img;
var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
function preload() {
  img = loadImage(url); 
}
function setup() {
  image(img, 0, 0);
}

I want to put an image from the internet into one variable.
(I want to use the ‘loadImage’ function.)
How should I do it? I wonder.

2

Documentation states this:

Loading an image from a URL or other remote location may be blocked due to your browser’s built-in security.

1 Like
3

@svan

thank you for the reply.
Q1) By any chance, do you operate?
It doesn’t work for me.
Q2) So, if it doesn’t work due to security reasons such as the browser, should I say that there is no way within ‘p5’?

4

should I say that there is no way within ‘p5’?

You can add it to index.html:

index
index1638×350 29.8 KB

1 Like
5

@svan

good idea.

p5 WEB,

var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let imgs;
function preload() {      
let imgs = createImg(url,"width='8000' height='600'");
    imgs.position(0, 0);       
}
function setup() {

}

It can be configured in the same way as above.
However, I want to change the image size, but I don’t know how.

6 
  <img src= "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height = "50" width = "160"/>
1 Like
7

@svan
What you say is correct.
However, I would like to solve it through ‘createImg’.
I would like to solve it through ‘p5’.

var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let imgs;
function preload() {      
let imgs = createImg("https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
    imgs.style("width : 1000px; height:130px");
    imgs.position(0, 0);       
}
function setup() {

}
2 Likes