尝试从图像中获取颜色
尝试从图像中获取颜色
提问于 2018-07-13 04:17:39
我正在尝试使用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)我如何修复此错误，或者是否有其他选择？我需要主色和不太亮的颜色。
回答 1
Stack Overflow用户
发布于 2018-07-13 04:24:48
问题是，您正在从第三方域加载一个图像资产，该图像资产与运行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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51313792
复制相关文章
相似问题