Question

我正在尝试使用Vibrant.js从图像中获取颜色，我向文件中添加了vibrant.min.js，并尝试如下使用它：

var img = new Image();
img.src = "http://f1.bcbits.com/img/a1312167393_16.jpg";

img.addEventListener('load', function() {
    var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())
});

但是这给了我以下错误：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at t.getImageData (file:///C:/Users/liweda/Downloads/test/js/vibrant.min.js:1:11198)
    at new i (file:///C:/Users/liweda/Downloads/test/js/vibrant.min.js:1:6082)
    at Image.<anonymous> (file:///C:/Users/liweda/Downloads/test/js/functions.js:11:19)

如何解决此错误，或者是否有其他选择？我需要显色而不是亮色

Answer 1

问题是，您是从第3方域名（相对于运行JavaScript代码的域名）加载图片资产。

例如，如果您在http://localhost:8080上本地运行，但是从http://f1.bcbits.com加载了图像资源，则画布被视为已污染，您将无法再从中获取或操纵图像数据。

这是在所有浏览器中发现的安全惯例。

如果您的生产网站是http://f1.bcbits.com，则代码可以正常工作。但是，为了使您能够在本地进行开发，需要将正在使用的图像从与开发中相同的域中加载，例如localhost。

编辑：

对不起，我忘了提到在本地和生产环境中修复此问题的方法。如果启用正确的CORS标头，则第三方域问题将消失。看看https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

尝试从图像中获取颜色

1 个答案: