HTML代码:
选择文件:<input type="file" id="file" accept="image/*">
<p id="preview"></p>
JS代码:
<script src="./color-thief.js"></script>
<script src="./image-similarity.js"></script>
<script>
var reader = new FileReader();
// 读文件成功的回调
reader.onload = function(e) {
// e.target.result就是图片的base64地址信息
let src = e.target.result;
imageSimilarity(src).then(similarity => {
// 0 极度相似
// 1 相似
// 2 不太相似
// 3 不相似
// 4 差异较大
if (similarity === 0) {
preview.append('视觉色彩极度相似');
} else if (similarity === 1) {
preview.append('视觉色彩相似');
} else if (similarity === 2) {
preview.append('视觉色彩不太相似');
} else if (similarity === 3) {
preview.append('视觉色彩不相似');
} else {
preview.append('视觉色彩差异较大');
}
});
preview.innerHTML = `<img src="${src}">`;
};
file.addEventListener('change', function (event) {
reader.readAsDataURL(event.target.files[0]);
});
</script>