图片过滤器不起作用

时间:2017-03-17 18:46:55

标签: javascript image

好吧,基本上,我制作了这个程序,要求用户提供图片链接,然后询问用户他们想要使用的过滤器类型,并将过滤器应用到图片

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

(抱歉,我尽可能地缩短了代码以获得重点) 这是我似乎遇到麻烦的部分。我遗漏了过滤图像本身的所有功能,因为我知道过滤器有效,我测试了它们。显而易见的问题似乎是过滤器以错误的方式拍摄图像。我尝试使用常量URL作为图像,并且工作正常,但是当用户是输入URL的用户时,过滤器不起作用。我认为该程序可能会在图片加载之前运行过滤器 ,但我不知道如何修复它,即使这是问题所在。我非常感谢帮助您排查代码,谢谢!

--- This是指向所提及代码的链接---

1 个答案:

答案 0 :(得分:1)

您遇到的是网络平台的安全限制。

将一个跨原始图像(粗略地说,从另一个域加载的任何图像)绘制到HTML画布上“污染”画布。这可以防止使用任何从画布中读取信息的函数,例如getPixel

有关详细信息,请参阅MDN文章CORS enabled image。但是,您可能需要让用户上传本地图像文件(使用文件输入),而不是通过URL指定一个。