COLOR THIEF读取图片色彩信息

技能 · 2022-05-18 · 1140 人浏览
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);
     }
}
VueJs ColorThief 图片处理 色彩信息读取
Theme Jasmine by Kent Liao