refactor: Move validation logic to core

This commit is contained in:
Lokesh Dhakar
2019-07-21 22:58:43 -07:00
parent e9b323a6b2
commit 8236c9d71f
13 changed files with 74 additions and 31 deletions

View File

@@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -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();

View File

@@ -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);

View File

@@ -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;

View File

@@ -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
}; };

View File

@@ -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
};