mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 05:44:24 +00:00
refactor: Move validation logic to core
This commit is contained in:
@@ -65,9 +65,6 @@ describe('getPalette()', function() {
|
||||
cy.visit('http://localhost:8080/cypress/test-pages/index.html');
|
||||
})
|
||||
|
||||
// FULL TEST LIST = [1, 2, 3, 5, 7, 10, 20];
|
||||
|
||||
// Non-breaking tests
|
||||
let testCounts = [2, 3, 5, 7, 10, 20];
|
||||
testCounts.forEach((count) => testPaletteCount(count))
|
||||
})
|
||||
|
||||
2
dist/color-thief.js
vendored
2
dist/color-thief.js
vendored
File diff suppressed because one or more lines are too long
2
dist/color-thief.js.map
vendored
2
dist/color-thief.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/color-thief.min.js
vendored
2
dist/color-thief.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/color-thief.mjs
vendored
2
dist/color-thief.mjs
vendored
File diff suppressed because one or more lines are too long
2
dist/color-thief.mjs.map
vendored
2
dist/color-thief.mjs.map
vendored
File diff suppressed because one or more lines are too long
2
dist/color-thief.umd.js
vendored
2
dist/color-thief.umd.js
vendored
File diff suppressed because one or more lines are too long
2
dist/color-thief.umd.js.map
vendored
2
dist/color-thief.umd.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -39,7 +39,7 @@ const showColorsForImage = function(image, section) {
|
||||
|
||||
// getPalette(img)
|
||||
let paletteHTML = '';
|
||||
let colorCounts = [2, 9];
|
||||
let colorCounts = [3, 9];
|
||||
colorCounts.forEach((count) => {
|
||||
let start = Date.now();
|
||||
|
||||
|
||||
@@ -28,13 +28,18 @@ function getColor(img, quality) {
|
||||
}
|
||||
|
||||
function getPalette(img, colorCount = 10, quality = 10) {
|
||||
const options = core.validateOptions({
|
||||
colorCount,
|
||||
quality
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
loadImg(img)
|
||||
.then(imgData => {
|
||||
const pixelCount = imgData.shape[0] * imgData.shape[1];
|
||||
const pixelArray = core.createPixelArray(imgData.data, pixelCount, quality);
|
||||
const pixelArray = core.createPixelArray(imgData.data, pixelCount, options.quality);
|
||||
|
||||
const cmap = quantize(pixelArray, colorCount);
|
||||
const cmap = quantize(pixelArray, options.colorCount);
|
||||
const palette = cmap? cmap.palette() : null;
|
||||
|
||||
resolve(palette);
|
||||
|
||||
@@ -31,17 +31,11 @@ import core from './core.js';
|
||||
var CanvasImage = function (image) {
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
|
||||
this.width = this.canvas.width = image.width;
|
||||
this.height = this.canvas.height = image.height;
|
||||
|
||||
this.context.drawImage(image, 0, 0, this.width, this.height);
|
||||
};
|
||||
|
||||
CanvasImage.prototype.getPixelCount = function () {
|
||||
return this.width * this.height;
|
||||
};
|
||||
|
||||
CanvasImage.prototype.getImageData = function () {
|
||||
return this.context.getImageData(0, 0, this.width, this.height);
|
||||
};
|
||||
@@ -86,25 +80,22 @@ ColorThief.prototype.getColor = function(sourceImage, quality = 10) {
|
||||
*
|
||||
*/
|
||||
ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) {
|
||||
|
||||
if (typeof colorCount === 'undefined' || colorCount < 2 || colorCount > 256) {
|
||||
colorCount = 10;
|
||||
}
|
||||
if (typeof quality === 'undefined' || quality < 1) {
|
||||
quality = 10;
|
||||
}
|
||||
const options = core.validateOptions({
|
||||
colorCount,
|
||||
quality
|
||||
});
|
||||
|
||||
// Create custom CanvasImage object
|
||||
var image = new CanvasImage(sourceImage);
|
||||
var imageData = image.getImageData();
|
||||
var pixels = imageData.data;
|
||||
var pixelCount = image.getPixelCount();
|
||||
var pixelCount = image.width * image.height;
|
||||
|
||||
const pixelArray = core.createPixelArray(imageData, pixelCount, quality);
|
||||
const pixelArray = core.createPixelArray(imageData.data, pixelCount, options.quality);
|
||||
|
||||
// Send array to quantize function which clusters values
|
||||
// using median cut algorithm
|
||||
var cmap = quantize(pixelArray, colorCount);
|
||||
var cmap = quantize(pixelArray, options.colorCount);
|
||||
var palette = cmap? cmap.palette() : null;
|
||||
|
||||
return palette;
|
||||
|
||||
@@ -19,6 +19,31 @@ function createPixelArray(imgData, pixelCount, quality) {
|
||||
return pixelArray;
|
||||
}
|
||||
|
||||
function validateOptions(options) {
|
||||
let { colorCount, quality } = options;
|
||||
|
||||
if (typeof colorCount === 'undefined' || !Number.isInteger(colorCount)) {
|
||||
colorCount = 10;
|
||||
} else if (colorCount === 1 ) {
|
||||
throw new Error('colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()');
|
||||
} else {
|
||||
colorCount = Math.max(colorCount, 2);
|
||||
colorCount = Math.min(colorCount, 20);
|
||||
}
|
||||
|
||||
if (typeof quality === 'undefined' || Number.isInteger(quality)) {
|
||||
quality = 10;
|
||||
} else if (quality < 1) {
|
||||
quality = 10;
|
||||
}
|
||||
|
||||
return {
|
||||
colorCount,
|
||||
quality
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
createPixelArray
|
||||
createPixelArray,
|
||||
validateOptions
|
||||
};
|
||||
|
||||
27
src/core.js
27
src/core.js
@@ -19,6 +19,31 @@ function createPixelArray(imgData, pixelCount, quality) {
|
||||
return pixelArray;
|
||||
}
|
||||
|
||||
function validateOptions(options) {
|
||||
let { colorCount, quality } = options;
|
||||
|
||||
if (typeof colorCount === 'undefined' || !Number.isInteger(colorCount)) {
|
||||
colorCount = 10;
|
||||
} else if (colorCount === 1 ) {
|
||||
throw new Error('colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()');
|
||||
} else {
|
||||
colorCount = Math.max(colorCount, 2);
|
||||
colorCount = Math.min(colorCount, 20);
|
||||
}
|
||||
|
||||
if (typeof quality === 'undefined' || Number.isInteger(quality)) {
|
||||
quality = 10;
|
||||
} else if (quality < 1) {
|
||||
quality = 10;
|
||||
}
|
||||
|
||||
return {
|
||||
colorCount,
|
||||
quality
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
createPixelArray,
|
||||
}
|
||||
validateOptions
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user