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

edited August 2017 in p5.js Library Questions

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);
}

Answers

  • edited June 2017 Answer ✓

    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();
    }
    
Sign In or Register to comment.