mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +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');
|
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];
|
let testCounts = [2, 3, 5, 7, 10, 20];
|
||||||
testCounts.forEach((count) => testPaletteCount(count))
|
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)
|
// getPalette(img)
|
||||||
let paletteHTML = '';
|
let paletteHTML = '';
|
||||||
let colorCounts = [2, 9];
|
let colorCounts = [3, 9];
|
||||||
colorCounts.forEach((count) => {
|
colorCounts.forEach((count) => {
|
||||||
let start = Date.now();
|
let start = Date.now();
|
||||||
|
|
||||||
|
|||||||
@@ -28,13 +28,18 @@ function getColor(img, quality) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getPalette(img, colorCount = 10, quality = 10) {
|
function getPalette(img, colorCount = 10, quality = 10) {
|
||||||
|
const options = core.validateOptions({
|
||||||
|
colorCount,
|
||||||
|
quality
|
||||||
|
});
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
loadImg(img)
|
loadImg(img)
|
||||||
.then(imgData => {
|
.then(imgData => {
|
||||||
const pixelCount = imgData.shape[0] * imgData.shape[1];
|
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;
|
const palette = cmap? cmap.palette() : null;
|
||||||
|
|
||||||
resolve(palette);
|
resolve(palette);
|
||||||
|
|||||||
@@ -31,17 +31,11 @@ import core from './core.js';
|
|||||||
var CanvasImage = function (image) {
|
var CanvasImage = function (image) {
|
||||||
this.canvas = document.createElement('canvas');
|
this.canvas = document.createElement('canvas');
|
||||||
this.context = this.canvas.getContext('2d');
|
this.context = this.canvas.getContext('2d');
|
||||||
|
|
||||||
this.width = this.canvas.width = image.width;
|
this.width = this.canvas.width = image.width;
|
||||||
this.height = this.canvas.height = image.height;
|
this.height = this.canvas.height = image.height;
|
||||||
|
|
||||||
this.context.drawImage(image, 0, 0, this.width, this.height);
|
this.context.drawImage(image, 0, 0, this.width, this.height);
|
||||||
};
|
};
|
||||||
|
|
||||||
CanvasImage.prototype.getPixelCount = function () {
|
|
||||||
return this.width * this.height;
|
|
||||||
};
|
|
||||||
|
|
||||||
CanvasImage.prototype.getImageData = function () {
|
CanvasImage.prototype.getImageData = function () {
|
||||||
return this.context.getImageData(0, 0, this.width, this.height);
|
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) {
|
ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) {
|
||||||
|
const options = core.validateOptions({
|
||||||
if (typeof colorCount === 'undefined' || colorCount < 2 || colorCount > 256) {
|
colorCount,
|
||||||
colorCount = 10;
|
quality
|
||||||
}
|
});
|
||||||
if (typeof quality === 'undefined' || quality < 1) {
|
|
||||||
quality = 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create custom CanvasImage object
|
// Create custom CanvasImage object
|
||||||
var image = new CanvasImage(sourceImage);
|
var image = new CanvasImage(sourceImage);
|
||||||
var imageData = image.getImageData();
|
var imageData = image.getImageData();
|
||||||
var pixels = imageData.data;
|
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
|
// Send array to quantize function which clusters values
|
||||||
// using median cut algorithm
|
// using median cut algorithm
|
||||||
var cmap = quantize(pixelArray, colorCount);
|
var cmap = quantize(pixelArray, options.colorCount);
|
||||||
var palette = cmap? cmap.palette() : null;
|
var palette = cmap? cmap.palette() : null;
|
||||||
|
|
||||||
return palette;
|
return palette;
|
||||||
|
|||||||
@@ -19,6 +19,31 @@ function createPixelArray(imgData, pixelCount, quality) {
|
|||||||
return pixelArray;
|
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 = {
|
module.exports = {
|
||||||
createPixelArray
|
createPixelArray,
|
||||||
|
validateOptions
|
||||||
};
|
};
|
||||||
|
|||||||
27
src/core.js
27
src/core.js
@@ -19,6 +19,31 @@ function createPixelArray(imgData, pixelCount, quality) {
|
|||||||
return pixelArray;
|
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 {
|
export default {
|
||||||
createPixelArray,
|
createPixelArray,
|
||||||
}
|
validateOptions
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user