COLOR THIEF读取图片色彩信息

预览测试地址

Color Thief是一个读取图像色彩的库，它的实现方式是把图像转换为canvas标签，并通过JavaScript来计算每一个像素点的颜色值来输出结果。

Github

本演示无后端通信，文件在本地处理不向后端发送数据。

一、安装 COLOR THIEF

npm install color-thief

二、在具体模块中引入 COLOR THIEF

因为我安装的是非官方版本的库，所以引入的来源不一样，请根据安装的库版本修改来源

import ColorThief from '@codemotion/color-thief'

三、HTML

<input id="ifile" type="file" style="display:none" accept="image/*" @change="onUpload">

四、JS（onUpload方法）

onUpload(e) {
    // 获取file类型数据
    var file  = e.target.files[0];

    // 判断上传的文件是否是图片类型
    if ((file.type).indexOf("image/") == -1) {
        alert('只支持图片色彩分析');
    }

    // 获取Blob类型数据
    var blob  = new Blob([file], { type: file.type })
    // 创建Blob Url
    var img_url = URL.createObjectURL(blob);
    
    // 创建一个Image对象
    var img_obj = new Image();
    // 把blob类型的链接赋予Image对象
    img_obj.src = img_url;

    // 实例化我们引入的ColorThief
    let colorthief = new ColorThief();

    // 监听图片加载事件（必须监听，不然无法向canvas copy色彩）
    img_obj.onload = res => {
        // 获取主色（均色），tempColor的值将会是一个一维数组，里面有三个数据，按顺序0-2分别为：0-r，1-g，2-b
        var tempColor = colorthief.getColor(img_obj,1);

        // 获取构成色，tempColorObj的值将会是一个二维数组，数据顺序和getColor一样。
        var tempColorObj = colorthief.getPalette(img_obj,20);
     }
}