javascript - 图片滤镜不起作用

Question

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

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是提到的代码的链接---

Answer 1

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

将跨源图像(粗略地说，从另一个域加载的任何图像)绘制到 HTML Canvas 上会“污染” Canvas 。这可以防止使用任何从 Canvas 读回信息的函数，例如 getPixel。

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