mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
feat: Add module support with new dist files
- `/dist/color-thief.umd.js`: UMD module. For simple script tag loading that exposes a global variable or for RequireJS AMD support. - `/dist/color-thief.js`: CommonJS module. Entry point for Node.js and Browserify. - `/dist/color-thief.mjs`: ES6 module. For modern browsers as well as Webpack and Rollup. - `/dist/color-thief.min.js`: Duplicate of `/dist/color-thief.umd.js`. Kept around to maintain backwards compatibility.
This commit is contained in:
39
cypress/test-pages/es6-module.html
Normal file
39
cypress/test-pages/es6-module.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Color Thief</title>
|
||||
<link rel="stylesheet" href="./screen.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img src="./img/rainbow-horizontal.png" />
|
||||
|
||||
<div id="result"></div>
|
||||
|
||||
<script type="module">
|
||||
import ColorThief from '../../dist/color-thief.mjs';
|
||||
|
||||
const colorThief = new ColorThief();
|
||||
|
||||
|
||||
const img = document.querySelector('img');
|
||||
|
||||
function getColorFromImage(img) {
|
||||
const result = colorThief.getColor(img);
|
||||
document.querySelector('#result').innerText = result;
|
||||
}
|
||||
|
||||
if (img.complete) {
|
||||
getColorFromImage(img);
|
||||
} else {
|
||||
image.addEventListener('load', function() {
|
||||
getColorFromImage(img);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -49,7 +49,7 @@
|
||||
</script>
|
||||
|
||||
|
||||
<script src="/src/color-thief.js"></script>
|
||||
<script src="/dist/color-thief.umd.js"></script>
|
||||
<script src="/node_modules/mustache/mustache.js"></script>
|
||||
<script src="index.js"></script>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
var colorThief = new ColorThief();
|
||||
|
||||
|
||||
var images = [
|
||||
'black.png',
|
||||
'red.png',
|
||||
|
||||
Reference in New Issue
Block a user