选择图片判断是否接近纯色实例页面

回到相关文章 »

效果:

选择文件:

代码:

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>