How to solve problems with CORS?

p5.js Coding Questions
1

When you use:

loadImage ('urldeoutrohost.jpg', img => {
     image (img, 0.0);
});

It ends up giving CORS error if you are not using a CORS extension. I would like to know if there is any way to solve this ?, why didn’t I want to have people have to install this extension to run my program.

Here the program exemple:
https://editor.p5js.org/willianxz/full/DLk9uXnJx

1 Like
2

The best, easier & correct way to load images from sites w/ CORS disabled is simply manually get them and place them inside your code’s folder: :file_folder:

If you don’t mind have your loaded images tainted, you can use createImg() instead: :framed_picture:

As a last recourse, you may use some CORS proxy service in order to load assets as if they had CORS enabled. :smiling_imp:

2 Likes
3

This is not what I am looking for as it is intended to show the information / images coming from the API.

I wish there was some command to allow you to display images without this problem … why always make it so difficult? - ’

I don’t think I can fix this problem since I don’t have access to the server from which the API is being used nor the kk code editor itself
Anyone who wants to see will have to install this same CORS extension.

4

I am trying to do the same thing, show students how to use an API to fetch an image. @GoToLoop had a solution that seems logical and it may have used to work here.

Unfortunately, the loadImage function with a the callback is not generating an error event. This code does not work:

/**
 * LoadImageErrorOverride (v1.12)
 * by GoToLoop (2015/Jul/09)
 *
 * forum.Processing.org/two/discussion/11608/
 * i-can-t-display-images-dynamically-loaded-from-web-
 * with-p5-js-always-a-cross-domain-issue#Item_3
 */
 
const URL = 'https://covers.openlibrary.org/b/id/295577-S.jpg';
 
var img;
 
function loadImageErrorOverride(errEvt) {
  const pic = errEvt.target;
 
  if (!pic.crossOrigin)  return print('Failed to reload ' + pic.src + '!');
  print('Attempting to reload it as a tainted image now...');
  pic.crossOrigin = null, pic.src = pic.src;
}
 
function setup() {
  createCanvas(500, 400);
  noLoop();
 
  loadImage(URL,
            function (pic) { print(img = pic), redraw(); },
            loadImageErrorOverride);
}
 
function draw() {
  background(img || 0350);
}

I’m going to try to load the image using createImg(). If anyone has example code to do this, that would be great to see!