pngjs-image中文文档|pngjs-image js中文教程|解析

npm npmdoc 2年前 (2021-12-26) 1214次浏览

pngjs-image中文文档|pngjs-image js中文教程|解析

安装命令:npm i pngjs-image

PNGjs-图片

基于 JavaScript 的 PNG 图像编码器、解码器和操作器

构建状态
工作服覆盖范围
代码气候等级

NPM 版本
NPM 许可证

新产品管理
新产品管理

覆盖率报告
API 文档

Gitter 支持

目录

安装

使用以下命令安装此模块:

npm install pngjs-image

将模块添加到您的package.json依赖项中:

npm install --save pngjs-image

将模块添加到您的package.json开发依赖项:

npm install --save-dev pngjs-image

在源代码中需要模块:

var PNGImage = require('pngjs-image');

用法

示例:创建新图像

var image = PNGImage.createImage(100, 300);
 
// Get width and height
console.log(image.getWidth());
console.log(image.getHeight());
 
// Set a pixel at (20, 30) with red, having an alpha value of 100 (half-transparent)
image.setAt(20, 30, { red:255, green:0, blue:0, alpha:100 });
 
// Get index of coordinate in the image buffer
var index = image.getIndex(20, 30);
 
// Print the red color value
console.log(image.getRed(index));
 
// Get low level image object with buffer from the 'pngjs' package
var pngjs = image.getImage();
 
image.writeImage('path/to/file', function (err) {
    if (err) throw err;
    console.log('Written to the file');
});

示例:加载图像

PNGImage.readImage('path/to/file', function (err, image) {
    if (err) throw err;
 
    // Get width and height
    console.log(image.getWidth());
    console.log(image.getHeight());
 
    // Set a pixel at (20, 30) with red, having an alpha value of 100 (half-transparent)
    image.setAt(20, 30, { red:255, green:0, blue:0, alpha:100 });
});

示例:从 url 加载图像

PNGImage.readImage('https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37_2x.png', function (err, image) {
    if (err) throw err;
 
    // The image is in the 'image' variable if everything went well
});

静态方法

  • <PNGImage> = PNGImage.addFilter(key, fn)fn带有标识符key的过滤器添加到过滤器列表中
  • <PNGImage> = PNGImage.createImage(width, height) 创建具有给定大小的图像
  • <PNGImage> = PNGImage.copyImage(image) 将图像复制到新容器中
  • PNGImage.readImage(path, fn)从文件或 url 加载图像,fn完成后调用该函数
  • PNGImage.loadImage(blob, fn)从内存加载图像,fn完成后调用该函数

实例方法

  • <pngjs> = image.getImage()获取pngjs实例
  • <Buffer> = image.getBlob() 获取数据作为缓冲对象
  • <int> = image.getWidth() 获取图像的宽度
  • <int> = image.getHeight() 获取图像的高度
  • image.clip(x, y, width, height)剪辑当前图像;尺寸必须小于原始图像
  • image.fillRect(x, y, width, height, color) 用提供的颜色填充矩形
  • image.applyFilters(filters, returnResult) 将过滤器列表应用于图像
  • <int> = image.getIndex(x, y) 将 x 和 y 坐标转换为图像缓冲区的顺序索引
  • image.writeImage(path, fn)将图像写入文件系统并fn在完成后调用该函数
  • image.toBlob(fn)将数据导出到缓冲区并fn在完成后调用该函数

像素操作

  • <uint32> = image.getAtIndex(idx) 在索引处获取完整的 32 位像素 idx
  • <uint32> = image.getAt(x, y) 在 x 和 y 坐标处获取完整的 32 位像素
  • <uint32> = image.getPixel(x, y) 在 x 和 y 坐标处获取完整的 32 位像素
  • image.setAtIndex(idx, color)在索引处设置特定颜色。保留的颜色不会被修改。
  • image.setAt(x, y, color)在 x 和 y 坐标处设置特定颜色。保留的颜色不会被修改。
  • image.setPixel(x, y, color)在 x 和 y 坐标处设置特定颜色。保留的颜色不会被修改。
  • <uint32> = image.getColorAtIndex(idx) 获取索引处像素的颜色分量 idx
  • <uint32> = image.getColor(x, y) 获取像素在 x 和 y 坐标处的颜色分量
  • <uint8> = image.getRed(idx) 获取某个索引处的红色强度
  • image.setRed(idx, value, opacity) 在索引处设置红色强度
  • <uint8> = image.getGreen(idx) 获取某个索引处的绿色强度
  • image.setGreen(idx, value, opacity) 在索引处设置绿色强度
  • <uint8> = image.getBlue(idx) 获取某个索引处的蓝色强度
  • image.setBlue(idx, value, opacity) 在索引处设置蓝色强度
  • <uint8> = image.getAlpha(idx) 获取索引处的 alpha 强度
  • image.setAlpha(idx, value, opacity) 在索引处设置 alpha 强度

像素转换

  • <uint32> = image.getBlurPixelAt(idx, funcName) 获取索引处像素的模糊颜色 idx
  • <uint32> = image.getYIQAtIndex(idx) 获取索引处像素的 YIQ 值 idx
  • <uint32> = image.getYIQ(x, y) 获取像素在 x 和 y 坐标处的 YIQ 值
  • <uint32> = image.getLumaAtIndex(idx) 获取索引处像素的亮度 idx
  • <uint32> = image.getLuma(x, y) 获取像素在 x 和 y 坐标处的亮度
  • <uint32> = image.getSepiaAtIndex(idx) 获取索引处像素的棕褐色 idx
  • <uint32> = image.getSepia(x, y) 获取像素在 x 和 y 坐标处的棕褐色
  • <uint32> = image.getLuminosityAtIndex(idx) 获取索引处像素的亮度 idx
  • <uint32> = image.getLuminosity(x, y) 获取像素在 x 和 y 坐标处的亮度
  • <uint32> = image.getLightnessAtIndex(idx) 获取索引处像素的亮度 idx
  • <uint32> = image.getLightness(x, y) 获取像素在 x 和 y 坐标处的亮度
  • <uint32> = image.getGrayScaleAtIndex(idx) 获取索引处像素的灰度值 idx
  • <uint32> = image.getGrayScale(x, y) 获取像素在 x 和 y 坐标处的灰度值

过滤器

以下过滤器可以应用于图像:

  • 模糊
  • 灰度
  • 亮度
  • 亮度
  • 亮度
  • 棕褐色

API-文档

使用以下命令生成文档:

npm run docs

文档将docs在模块根目录文件夹中生成

测试

使用以下命令运行测试:

npm run test

代码覆盖将写入coverage模块根目录中的文件夹。

第三方库

此模块使用以下第三方库:

依赖关系

开发依赖

执照

麻省理工学院执照

版权所有 2014-2015 雅虎公司。

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:pngjs-image中文文档|pngjs-image js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}