Unable to access cross-domain image in combination with Seriously.js

patiq

Hi,

I'm trying to blur an image with Seriously.js. For local image files this is working but I want to use a dynamic web address as a image source. So far, this causes an cross-domain image problem. Does someone maybe has a work-around?

Thanks for your help.

var imgCover;

 function preload() {
    var url = "https://lh3.googleusercontent.com/o94bc-DU6CAt5Q5JQPOfA3FB0Fs84FC7m7eCSPmyZUBqKkkQrnvMYAFz04-9nCe-lfTEQ_41wA=w600";
    imgCover = createImg(url);
}

function setup() {
    noLoop();
    createCanvas(windowWidth, windowHeight);

    canvas = createCanvas(windowWidth, windowHeight, WEBGL);
    canvas.id('imgTarget');

    blurCover();
    //imgCover = createImg(url, blurCover);

}

function blurCover() {
    imgCover.id('imgSource');
    var seriously = new Seriously();
    var src = seriously.source('#imgSource');
    var target = seriously.target('#imgTarget');

    var blur = seriously.effect('blur');
    blur.amount = 0.1;
    blur.source = src;
    target.source = blur;
    seriously.go();
}

function loadImageErrorOverride(errEvt) {
  var 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;
    blurCover();
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

patiq

I found a solution. It seems like the p5 image object caused the problem. Just in case someone needs a solution for this as well, this is my working code:

seriouslyjs.org

sketch.js

var slider;
var url = "https://lh3.googleusercontent.com/o94bc-DU6CAt5Q5JQPOfA3FB0Fs84FC7m7eCSPmyZUBqKkkQrnvMYAFz04-9nCe-lfTEQ_41wA=w600";

function setup() {
    noLoop();
    
    canvas = createCanvas(400, 400, WEBGL);
    canvas.position(0,50);
    canvas.id('imgTarget');

    slider = createSlider(0, 1, 0.5, 0.01);
    slider.id('blur-slider');

  img = new Image();
  img.crossOrigin = "anonymous";
  img.src = url;
    this.blurCover();
}


function blurCover() {
    var seriously = new Seriously();
    var src = seriously.source(img);
    var target = seriously.target('#imgTarget');

    var blur = seriously.effect('blur');
    blur.amount = '#blur-slider';
    blur.source = src;
    target.source = blur;
    seriously.go();
}