Nodejs提取图片主题色（一）

最新推荐文章于 2023-01-12 11:46:29 发布
最新推荐文章于 2023-01-12 11:46:29 发布
阅读量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三种格式的图片。用
获取一个图片像素点RGB值的代码
Zhenli312的专栏
04-22 3706
以下是由CocoaChina会员 “上帝的大大” 分享的代码，用于获取图片信息，查询像素点的RGB值。 帖子地址 http://www.cocoachina.com/bbs/read.php?tid-13152.html   - (void*)getImageData:(UIImage*)image {     void* imageData;     if (imageData ==
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"
OpenCV遍历文件夹读取图片，并取RGB通道的最大和最小值
$firecat利白的代码足迹$
08-07 1594
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.
nodejs将图片的像素值提取出来将RGBA转换成16位彩色
LMX的博客
01-12 1311
RGBA由4*8bit组成（255， 255， 255，255），16位彩色为2*8bit组成。16位彩色需要两个字节来描述颜色，它的16个比特中，想要将RGBA转换成16位彩色就是将RGBA中的RGB转换成16位彩色中的RGB，转换的方式简单粗暴直接去低位（32位RGB转16位彩色会降低精度），也就是。这样就得到了一个16位的颜色描述，但对于硬件设备中要用的还不太一致，微控制器一般是用两个字节来表示16位的，因此需要将16位的数据拆分成两个8位。
读取图片并显示每个像素处的RGB值
07-03 1万+
不记得在网上什么地方见到的demo了，感觉会有时候会用到
获取图片的每一个像素颜色值
diankuini1374的博客
06-19 1276
+ (NSArray*)getRGBAsFromImage:(UIImage*)image atX:(int)x andY:(int)y count:(int)count { NSMutableArray *result = [NSMutableArray arrayWithCapacity:count]; // First get the image into...
Nodejs 识别图片类型的方法
10-16
主要介绍了Nodejs 识别图片类型的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
nodejs读取图片返回给浏览器显示
10-16
主要为大家详细介绍了nodejs读取图片返回给浏览器显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
nodejs图片合成源代码
06-27
nodejs利用gm插件合成图片源码片段
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
nodejs实现截取上传视频中一帧作为预览图片
10-18
主要为大家详细介绍了nodejs实现截取上传视频中一帧作为预览图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Nodejs提取图片主图色（二）
roamingcode的博客
08-28 1869
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 多点找色
qq_25226575的博客
06-01 842
"nodejs"; const { requestScreenCapture } = require('media_projection'); const image = require('image'); const { findColor, findColorSync, findMultiColors, findMultiColorsSync } = image; const { delay } = require('lang'); const { Color } = require('color');
视频转gif(二):后端，云函数nodejs实现多图转gif
蓝with黑的博客
07-20 1289
node.js 使用gif-encoder和get-pixels实现多图转gif node.js 实现多图转gif
nodejs处理图片的中间件node-images
热门推荐
银狐的专栏
01-29 3万+
Cross-platform image decoder(png/jpeg/gif) and encoder(png/jpeg) for Node.js Node.js轻量级跨平台图像编解码库 var images = require("images"); images("input.jpg") //Load image from file
Bitmap类getPixels()详解
薛瑄的博客
08-18 2万+
getPixels()void getPixels (int[] pixels, int offset, int stride, int x, int y, int width, int heigh
Bitmap类getPixels()方法中参数stride理解
_qing的专栏
02-14 9834
在学习Graphics中遇到位图(Bitmap)中getPixels()方法，对该方法的用法大体理解，但对其中的stride参数却不明白具体的用法以及用意，经过一番折腾后，有些明了，现记述过程如下：  行文有些详细，请赶时间的同学直接跳到红字总结处查看！！  getPixels()方法的用处为获取位图(Bitmap)中的根据方法参数所决定的像素值(颜色值)，存入类型为int的pixels数
通过getPixel();和通过bmp.getPixels();方法遍历整张图片的效率比较。
zji
12-14 1万+
如果要遍历一张图片的所有像素的（比如二值化），可以用两个for循环嵌套通过Bitmap中的getPixel(x,y)方法获取对应点的像素值即可。还有一种方法是通过Bitmap中的getPixels(pixels, offset, stride, x, y, width, height)方法获取一维数组pixels，然后在遍历pixels。经过测试，我发现后者方法遍历像素点效率大大高于前者。见如下示
nodejs 获取图片
最新发布
05-07
以下是一个简单的获取图片的示例代码： ``` const request = require('request'); const cheerio = require('cheerio'); const fs = require('fs'); const imgUrl = 'https://example.com/image.jpg'; // 图片链接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值