Nodejs提取图片主题色（一）

最新推荐文章于 2024-03-29 14:11:34 发布
最新推荐文章于 2024-03-29 14:11:34 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： Nodejs 文章标签： nodejs 图片提取主题色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roamingcode/article/details/108225806
版权

需求

  1. 一个可以正常访问的图片链接
  2. 排除掉图片数据值中灰色系rgb的值（即 r=g=b 的值）
  3. 统计剩余的rgb值，得出颜色排行

  1. 这里主要参考了 https://github.com/lokesh/color-thief 开源项目

  2. 下篇见 Nodejs提取图片主题色（二）

使用方式

ColorThief.getColor('https://lokeshdhakar.com/projects/color-thief/images/image-1.jpg')
  .then((color) => {
    console.log('color', color); // 获得主题色（色值占比最多）
  })
  .catch((err) => {
    console.log(err);
  });

ColorThief.getPalette('https://lokeshdhakar.com/projects/color-thief/images/image-1.jpg', 5)
  .then((palette) => {
    console.log('palette', palette); // 获得主题色排行（色值占比前5的值）
  })
  .catch((err) => {
    console.log(err);
  });

如何排除掉图片数据值中灰色系rgb的值

这里是在对图像色值做统计的地方做拦截处理 -> createPixelArray 方法

// 该文件是基于 color-thief 提供的 color-thief-node.js 上做的处理

const quantize = require('quantize');
const getPixels = require('./node-pixels');

function createPixelArray(imgData, pixelCount, quality) {
    const pixels = imgData;
    const pixelArray = [];

    for (let i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
        offset = i * 4;
        r = pixels[offset + 0];
        g = pixels[offset + 1];
        b = pixels[offset + 2];
        a = pixels[offset + 3];

        if (typeof a === 'undefined' || a >= 125) {
            // 排除灰色系值
            if (r !== g || r !== b) {
                pixelArray.push([r, g, b]);
            }
        }
    }
    return pixelArray;
}

function validateOptions(options) {
    let { colorCount, quality } = options;

    if (typeof colorCount === 'undefined' || !Number.isInteger(colorCount)) {
        colorCount = 10;
    } else if (colorCount === 1 ) {
        throw new Error('colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()');
    } else {
        colorCount = Math.max(colorCount, 2);
        colorCount = Math.min(colorCount, 20);
    }

    if (typeof quality === 'undefined' || !Number.isInteger(quality) || quality < 1) {
        quality = 10;
    }

    return {
        colorCount,
        quality
    }
}

function loadImg(img) {
    return new Promise((resolve, reject) => {
        getPixels(img, function(err, data) {
            if(err) {
                reject(err)
            } else {
                resolve(data);
            }
        })
    });
}

function getColor(img, quality) {
    return new Promise((resolve, reject) => {
        getPalette(img, 5, quality)
            .then(palette => {
                resolve(palette[0]);
            })
            .catch(err => {
                reject(err);
            })
    });

}

function getPalette(img, colorCount = 10, quality = 10) {
    const options = validateOptions({
        colorCount,
        quality
    });

    return new Promise((resolve, reject) => {
        loadImg(img)
            .then(imgData => {
                const pixelCount = imgData.shape[0] * imgData.shape[1];
                const pixelArray = createPixelArray(imgData.data, pixelCount, options.quality);

                const cmap = quantize(pixelArray, options.colorCount);
                const palette = cmap? cmap.palette() : null;

                resolve(palette);
            })
            .catch(err => {
                reject(err);
            })
    });
}

module.exports = {
    getColor,
    getPalette
};

在上面的文件中，除了修改了排除灰色系值的逻辑，还有一点不同

const getPixels = require('./node-pixels');

原文使用

const getPixels = require('get-pixels');

我们需要对 get-pixels 这个包进行一些额外的修改

修改的原因在于

  1. 图片的 mimeType 可能带有字符编码，比如 image/jpeg;charset=UTF-8，但期望得到的是 image/jpeg
  2. 针对 jpg、jpeg 的图片处理经常报错，尤其是经过第三方处理过的图片，比如（经过裁剪、拼接），其中报错多为throw new Error("SOI not found");，意思是该图片不符合jpg图片规范
// node-pixels.js
'use strict';

var ndarray = require('ndarray');
var path = require('path');
var PNG = require('pngjs').PNG;
// var jpeg = require('jpeg-js'); // 对于 jpg、jpeg 格式的文件，不再使用jpeg-js进行解码处理，转而使用 images 这个包
var pack = require('ndarray-pack');
var GifReader = require('omggif').GifReader;
var Bitmap = require('node-bitmap');
var fs = require('fs');
var request = require('request');
var mime = require('mime-types');
var parseDataURI = require('parse-data-uri');
var images = require('images'); // 使用 images 处理jpg、jpeg

function handlePNG(data, cb) {
  var png = new PNG();
  png.parse(data, function (err, img_data) {
    if (err) {
      cb(err);
      return;
    }
    cb(
      null,
      ndarray(
        new Uint8Array(img_data.data),
        [img_data.width | 0, img_data.height | 0, 4],
        [4, (4 * img_data.width) | 0, 1],
        0
      )
    );
  });
}

function handleJPEG(data, cb) {
  var jpegData;
  var imageData;
  try {
    // jpegData = jpeg.decode(data); 不再使用jpeg-js进行解码处理，使用 images 进行处理
    imageData = images(data);
    jpegData = imageData.encode('jpg'); // 重新以jpg格式进行编码，用于修复问题 2
  } catch (e) {
    cb(e);
    return;
  }
  if (!jpegData) {
    cb(new Error('Error decoding jpeg'));
    return;
  }
  var nshape = [imageData.height(), imageData.width(), 4];
  var result = ndarray(jpegData, nshape);
  cb(null, result.transpose(1, 0));
}

function handleGIF(data, cb) {
  var reader;
  try {
    reader = new GifReader(data);
  } catch (err) {
    cb(err);
    return;
  }
  if (reader.numFrames() > 0) {
    var nshape = [reader.numFrames(), reader.height, reader.width, 4];
    try {
      var ndata = new Uint8Array(nshape[0] * nshape[1] * nshape[2] * nshape[3]);
    } catch (err) {
      cb(err);
      return;
    }
    var result = ndarray(ndata, nshape);
    try {
      for (var i = 0; i < reader.numFrames(); ++i) {
        reader.decodeAndBlitFrameRGBA(
          i,
          ndata.subarray(result.index(i, 0, 0, 0), result.index(i + 1, 0, 0, 0))
        );
      }
    } catch (err) {
      cb(err);
      return;
    }
    cb(null, result.transpose(0, 2, 1));
  } else {
    var nshape = [reader.height, reader.width, 4];
    var ndata = new Uint8Array(nshape[0] * nshape[1] * nshape[2]);
    var result = ndarray(ndata, nshape);
    try {
      reader.decodeAndBlitFrameRGBA(0, ndata);
    } catch (err) {
      cb(err);
      return;
    }
    cb(null, result.transpose(1, 0));
  }
}

function handleBMP(data, cb) {
  var bmp = new Bitmap(data);
  try {
    bmp.init();
  } catch (e) {
    cb(e);
    return;
  }
  var bmpData = bmp.getData();
  var nshape = [bmpData.getHeight(), bmpData.getWidth(), 4];
  var ndata = new Uint8Array(nshape[0] * nshape[1] * nshape[2]);
  var result = ndarray(ndata, nshape);
  pack(bmpData, result);
  cb(null, result.transpose(1, 0));
}

function doParse(mimeType, data, cb) {
  // 增加mime的类型的处理，用于修复问题 1
  if (mimeType.includes(';')) {
    mimeType = mimeType.split(';')[0];
  }
  switch (mimeType) {
    case 'image/png':
      handlePNG(data, cb);
      break;

    case 'image/jpg':
    case 'image/jpeg':
      handleJPEG(data, cb);
      break;

    case 'image/gif':
      handleGIF(data, cb);
      break;

    case 'image/bmp':
      handleBMP(data, cb);
      break;

    default:
      cb(new Error('Unsupported file type: ' + mimeType));
  }
}

module.exports = function getPixels(url, type, cb) {
  if (!cb) {
    cb = type;
    type = '';
  }
  if (Buffer.isBuffer(url)) {
    if (!type) {
      cb(new Error('Invalid file type'));
      return;
    }
    doParse(type, url, cb);
  } else if (url.indexOf('data:') === 0) {
    try {
      var buffer = parseDataURI(url);
      if (buffer) {
        process.nextTick(function () {
          doParse(type || buffer.mimeType, buffer.data, cb);
        });
      } else {
        process.nextTick(function () {
          cb(new Error('Error parsing data URI'));
        });
      }
    } catch (err) {
      process.nextTick(function () {
        cb(err);
      });
    }
  } else if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) {
    request({ url: url, encoding: null }, function (err, response, body) {
      if (err) {
        cb(err);
        return;
      }

      type = type;
      if (!type) {
        if (response.getHeader !== undefined) {
          type = response.getHeader('content-type');
        } else if (response.headers !== undefined) {
          type = response.headers['content-type'];
        }
      }
      if (!type) {
        cb(new Error('Invalid content-type'));
        return;
      }
      doParse(type, body, cb);
    });
  } else {
    fs.readFile(url, function (err, data) {
      if (err) {
        cb(err);
        return;
      }
      type = type || mime.lookup(url);
      if (!type) {
        cb(new Error('Invalid file type'));
        return;
      }
      doParse(type, data, cb);
    });
  }
};

在修复 问题2 的时候使用了 images 这个包，这样处理后可以得到下面的色盘值

[ [ 195, 170, 172 ],
  [ 36, 154, 139 ],
  [ 184, 35, 149 ],
  [ 174, 186, 34 ],
  [ 95, 171, 171 ] ]

经过与实际图片的对比，发现这个色盘值大多不符合，且差距明显

其中具体问题就在 images 这里，经过代码优化后产生了如下结果，该值与图片是相符的

[ [ 125, 190, 192 ],
  [ 213, 191, 131 ],
  [ 53, 37, 27 ],
  [ 129, 123, 58 ],
  [ 42, 125, 148 ] ]

代码优化见 Nodejs提取图片主题色（二）

roamingcode
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs读取图片像素
dreamer2020的专栏
06-15 1万+
之前在做H5时，有这么一个关于图片的问题，就是把一张图片裁剪得左右空白部分对称，图片背景为白色。这件事情说来也简单，读取图片的像素，分别检测左右空白部分的宽度，然后裁剪到一样即可 。接下来就涉及到读取图片像素的问题了，发现了一个好用的工具get-pixels，可以读取图片像素并返回数组。安装npm install --save get-pixels目前支持PNG, JPEG和GIF三种格式的图片。用
Node.js图片主题色提取包ThmclrX.zip
07-19
ThmclrX 是一个能提取图片主题色的 Node.js 包。 有三个 API：var thmclrx = require("thmclrx"); thmclrx.octreeGet(file, [maxColors], [callback], [frameNumber]); thmclrx.mindiffGet(file, [palette], [callback], [frameNumber]); thmclrx.mixGet(file, [firstStepMaxColors], [palette], [callback], [frameNumber]);上面三种方法提取出来的图片主题色结果都不一样，按自己的需求选择。 标签：ThmclrX
获取一个图片像素点RGB值的代码
Zhenli312的专栏
04-22 3721
以下是由CocoaChina会员 “上帝的大大” 分享的代码，用于获取图片信息，查询像素点的RGB值。 帖子地址 http://www.cocoachina.com/bbs/read.php?tid-13152.html   - (void*)getImageData:(UIImage*)image {     void* imageData;     if (imageData ==
Nodejs提取图片主图色（二）
roamingcode的博客
08-28 1873
Nodejs提取图片主图色（一） 如何提高颜色提取的正确率 主要是 images、jpeg-js、pngjs 共用，彼此之间并不冲突 // node-pixels.js 'use strict'; var ndarray = require('ndarray'); // var path = require('path'); var PNG = require('pngjs').PNG; // 处理 png 文件 var jpeg = require('jpeg-js'); // 处理 jpg/jpe.
图片主题色提取算法小结（Node.js 版）
Dorrn的专栏
01-05 1642
原文链接：http://xcoder.in/2014/09/17/theme-color-extract/ 所谓主题色提取，就是对于一张图片，近似地提取出一个调色板，使得调色板里面的颜色能组成这张图片的主色调。 　　以上定义为我个人胡诌的。 　　大家不要太把我的东西当成严谨的文章来看，很多东西什么的都是我用我自己的理解去做，并没有做多少考证。 　　解析中都会以 Node.js 来写
js：获取图片颜色的主色调
彭世瑜的博客
08-22 1123
在浏览器环境中，可以通过canvas 获取图片的颜色列表，再对其进行排序，就能获取图片颜色主色调了，也可以使用开源库，可以很方便的获取图片颜色。
基于QT和Node.js的八叉树算法提取图片主题色
毕业作品网站
07-03 723
以上定义为我个人胡诌的。大家不要太把我的东西当成严谨的文章来看，很多东西什么的都是我用我自己的理解去做，并没有做多少考证。解析中都会以 Node.js 来写一些小 Demo。写该文章主要是为了对我这几天对于『主题色提取』算法研究进行一个小结。花瓣网需要做一件事，就是把图片的主题色提取出来加入到花瓣网搜索引擎的索引当中，以供用户搜索。于是有了一个需求：提取出图片中在某个规定调色板中的颜色，加入到搜索引擎。接下去就开始解析两种不同的算法以及在这种业务场景当中的应用。这个算法大家可以忽略，可能是我使用的姿势不对，
nodejs读取图片返回给浏览器显示
10-16
主要为大家详细介绍了nodejs读取图片返回给浏览器显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Nodejs 识别图片类型的方法
10-16
主要介绍了Nodejs 识别图片类型的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
nodejs图片合成源代码
06-27
nodejs利用gm插件合成图片源码片段
自动识别上传图片中的主要颜色
07-18
使用 canvas 识别选择上传图片的主题颜色，获取到出现次数最多的颜色
php识别图片主色调
08-06
此demo的教程请见http://blog.csdn.net/xiaodao1986
get-pixels:将图像读入ndarray
04-14
获取像素 给定URL /路径，获取图像中的所有像素，然后将结果作为返回。 使用100％JavaScript编写，可在browserify和node.js中使用，并且没有外部本机依赖项。 当前支持以下文件格式： PNG JPEG GIF 例子 var getPixels = require ( "get-pixels" ) getPixels ( "lena.png" , function ( err , pixels ) { if ( err ) { console . log ( "Bad image path" ) return } console . log ( "got pixels" , pixels . shape . slice ( ) ) } ) 安装 npm install get-pixels require("get-pixels"
nodejs实现截取上传视频中一帧作为预览图片
10-18
主要为大家详细介绍了nodejs实现截取上传视频中一帧作为预览图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
推荐一款实用的图像色彩提取工具：Node Colour Extractor
gitblog_00064的博客
03-16 557
推荐一款实用的图像色彩提取工具：Node Colour Extractor 如果你是一名设计师或者开发者，需要从图片中提取出主要的颜色方案，那么这款开源项目一定能够帮助到你。 项目简介 Node Colour Extractor是一款基于Node.js的命令行工具，可以快速地从一张图片中提取出最常见的颜色，并以不同的格式导出。 应用场景 设计师在进行UI设计时，可以从参考图中自动提取出色彩搭配方...
Node.js 多点找色
qq_25226575的博客
06-01 847
"nodejs"; const { requestScreenCapture } = require('media_projection'); const image = require('image'); const { findColor, findColorSync, findMultiColors, findMultiColorsSync } = image; const { delay } = require('lang'); const { Color } = require('color');
通过node 后端实现颜色窃贼 (取出某个图片的主体rgb颜色 )
阿乐的博客
03-29 497
前端我试了试 color-thief 的插件 但是 这个插件是基于canvas 的模式来的 我需要在小程序中使用这个插件 而且是Taro + vue3 的项目 会报错。我前端轮播图的背景色 想通过每一张轮播图片的颜色作为背景色 这样的话 需要通过一张图片 取出图片的颜色 这个工作通过前端去处理 也可以通过后端去处理。我想到了使用后端的能力去取到这个图片的颜色rgb的颜色 我后端使用的是node 项目。因为我目前只是获取了部分图片的颜色 所以代码的颜色是写死的。电影图片轮播的时候 会自动获取颜色。
OpenCV遍历文件夹读取图片，并取RGB通道的最大和最小值
$firecat利白的代码足迹$
08-07 1600
cv::Mat calcMax(const cv::Mat& bgr) //求RGB三个通道的最大值 { cv::Mat image(bgr.rows, bgr.cols, CV_8UC1, cv::Scalar(255)); if (bgr.channels() != 3) { return bgr; } uchar max = 0; uchar* pSrc = nullptr; uchar* pDst = image.data; for (int y = 0; y &l.
读取图片并显示每个像素处的RGB值
热门推荐
07-03 1万+
不记得在网上什么地方见到的demo了，感觉会有时候会用到
nodejs 获取图片
最新发布
05-07
Node.js可以使用第三方模块来获取图片，其中比较常用的是request和cheerio模块。以下是一个简单的获取图片的示例代码： ``` const request = require('request'); const cheerio = require('cheerio'); const fs = require('fs'); const imgUrl = 'https://example.com/image.jpg'; // 图片链接 const savePath = 'image.jpg'; // 图片保存路径 request(imgUrl).pipe(fs.createWriteStream(savePath)).on('close', function () { console.log('图片保存成功！'); }); ``` 在这段代码中，我们首先使用request模块来获取图片的二进制数据，然后使用fs模块将二进制数据写入本地文件。通过这种方式，我们可以轻松地获取网络上的图片并保存到本地。 如果你想更深入地了解Node.js获取图片的方法，可以查看相关的文档和资料，例如Node.js官方文档和第三方模块的官方文档。同时也可以通过查询相关的问题或提出具体问题来获得更多帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值