Canvas & Color-Thief 图像索引大小

Question

我正在使用 color-thief 来分析图像的颜色。我正在使用 canvas 和 getImageData，我在控制台中收到以下错误消息：

Error: Index or size is negative or greater than the allowed amount
CanvasImage.prototype.getImageData@http://localhost:3000/js/color-thief.js:51:12
ColorThief.prototype.getPalette@http://localhost:3000/js/color-thief.js:109:22
ColorThief.prototype.getColor@http://localhost:3000/js/color-thief.js:75:25
colorController/this.getColors@http://localhost:3000/js/ang.js:20:22

我不确定这是来自图像像素大小的 canvas 问题，还是另一个库中的错误（我也在使用 AngularJS），但我被卡住了不确定我能做什么。

我认为像素数为 0 存在问题，当我将 console.log 行添加到 color-thief.js 中的以下代码时，某些图像会得到“0 0”。

关键点 --> image.width 和 image.height 仅对某些图像显示 0，而其余图像显示有意义的比率，例如 1280 922 或 2000 1333。

var CanvasImage = function (image) {
    this.canvas  = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');

    document.body.appendChild(this.canvas);

    this.width  = this.canvas.width  = image.width;
    this.height = this.canvas.height = image.height;

    console.log(image.width, image.height);

    this.context.drawImage(image, 0, 0, this.width, this.height);
};

知道为什么会发生这种情况吗？

Answer 1

答案是在代码中添加 image.addEventListener("load", function() { ... } 以正确加载图像。

Canvas & Color-Thief 图像索引大小

Canvas & Color-Thief image index size

javascript

angularjs

canvas

color-thief