CODEWITHSUNDEEP
javascriptimage
Layne
Layne

Reputation: 35

Picture Filter Doesn't Work

Okay, so, basically, I made this program that asks the user for a link to a picture, then asks the user for the type of filter they would like to use, and applies the filter to the picture

function start(){
    askForImage();
    askForFilter();
}

function askForImage(){
    var link = readLine("Please give the link to the image");
    println("Fitting the image to canvas as best a possible.");
    var image = new WebImage(link);
    image.setPosition(0, 0);
    image.setSize(getWidth(), getHeight());
    add(image);
}

function askForFilter(){
    var filterType = readLine("What filter would you like to use on your photo?");

    if(filterType == "darken"){
        setTimeout(function(){
        darkenFilter(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "brighten"){
        setTimeout(function(){
        brightenFilter(image);
         }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "invert"){
        setTimeout(function(){
        invert(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "grayscale"){
        setTimeout(function(){
        blackAndWhiteFilter(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "remove blue"){
        setTimeout(function(){
        removeBlue(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "remove red"){
        setTimeout(function(){
        removeRed(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "remove green"){
        setTimeout(function(){
        removeGreen(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else if(filterType == "saturate"){
        setTimeout(function(){
        saturate(image);
        }, IMAGE_LOAD_WAIT_TIME);
    }else{
        println("That is not a possible filter option.");
    }
}

(Sorry, I shortened the code as much as possible to get the point across) This is the section I seem to be having trouble with. I left out all the functions that filter the image itself because I know that the filters work, I tested them. The apparent issue seems to be that the filters are taking the image the wrong way. I tried using a constant URL as the image, and that worked fine, but when the user is the one who enters the URL, the filter doesn't work. I think that the program may be running the filters before the picture loads, but I wouldn't know how to fix that even if it was the problem. I'd really appreciate the help in troubleshooting my code, thanks!

---This is a link to the code mentioned---

Upvotes: 0

Views: 64

Answers (1)

user149341
user149341

Reputation:

What you're running into is a security limitation of the web platform.

Drawing a cross-origin image (roughly speaking, any image loaded from another domain) onto a HTML canvas "taints" the canvas. This prevents any function from being used that reads information back from the canvas, such as getPixel.

For more information, see the MDN article CORS enabled image. However, you will probably need to have the user upload a local image file (using a file input), rather than specifying one by URL.

Upvotes: 1

Related Questions