scijs / get-pixels Goto Github PK

Hi all,

I'm utilizing nut.js in my project to capture the screen. I want to give the buffer from that operation to get-pixels. When I do though, I get this error:

Error: Invalid file signature
    at module.exports.Parser._parseSignature (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/parser.js:53:18)
    at module.exports.ChunkStream._processRead (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/chunkstream.js:174:13)
    at module.exports.ChunkStream._process (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/chunkstream.js:193:14)
    at module.exports.ChunkStream.write (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/chunkstream.js:61:8)
    at module.exports.ChunkStream.end (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/chunkstream.js:74:10)
    at exports.PNG.PNG.end (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/png.js:98:16)
    at exports.PNG.PNG.parse (/private/tmp/o/node_modules/get-pixels/node_modules/pngjs/lib/png.js:88:8)
    at handlePNG (/private/tmp/o/node_modules/get-pixels/node-pixels.js:17:7)
    at doParse (/private/tmp/o/node_modules/get-pixels/node-pixels.js:109:7)
    at getPixels (/private/tmp/o/node_modules/get-pixels/node-pixels.js:140:5) undefined

This is my code:

const { screen } = require("@nut-tree/nut-js");
const getPixels = require("get-pixels");

(async () => {
  const screenCapture = await screen.grab();
  getPixels(screenCapture.data, 'image/png', async (error, pixels) => {
      console.log(error, pixels)
    });
})();

screenCapture.data is an image buffer, which when console logged looks like:

<Buffer d5 86 f5 ff d4 86 f5 ff d4 86 f5 ff d4 86 f5 ff d4 86 f5 ff d5 86 f5 ff d4 86 f5 ff d4 86 f5 ff d4 86 f5 ff d4 86 f5 ff d4 86 f6 ff d5 87 f5 ff d4 87 ... 8294350 more bytes>

Does anyone have any advice on how to make this work, or am I running into a bug? Thanks.

Last release bumps jpeg-js from 0.3 to 0.4 which drops Node 6 support. This effectively means that get-pixels has now also dropped support for Node 6. I would argue that this is a breaking change. I propose 3.3.3 should be nerfed and re-released as 4.0.0

Dear developer.

This code got the broken pixels. or See example

# npm test
# "test": "npm install && beefy index.coffee --open -- -t coffeeify -t brfs"

# index.coffee
GifReader= require('omggif').GifReader
fs= require 'fs'
data= fs.readFileSync 'animation.gif'
reader= new GifReader data

context= document.createElement('canvas').getContext '2d'
context.canvas.width= reader.width
context.canvas.height= reader.height
image= context.createImageData reader.width,reader.height

console.log reader.numFrames()
console.log reader.decodeAndBlitFrameRGBA 0,image.data
context.putImageData image,0,0

document.body.appendChild context.canvas

regl-texture recognizes:

• canvas
• context2d
• ImageData, ImageBitmap
• Image
• Uint8Array, Uint8ClampedArray
• numeric array, array of arrays

Available other inputs:

• ArrayBuffer, ArrayBufferView
• File, Blob
• base64 string

Would be nice to take in these arguments

I'm not sure if it's technically an issue with this library or something else but here goes:

I'm using sharp (the nodejs libvips binding) to perform some image manipulation like resizing / cropping etc.

I read the image file from disk into sharp, then output the resized image to a buffer which is returned via a node http server. I'm trying to use a combination of the get-pixels, apply-cube-lut and save-pixels packages to add a colour grading step.

The problem is that the pixels data I get in the getPixels callback is truncated and I only see the top 5th / 4th of the original image transformed, the rest is black. Do you have any suggestions on where to look to fix this?

I'd like to see bitmap support. The option I was looking at before this only supported PNGs, and this is step up.

PNG support will work for me for now, but even more flexibility would be awesome.

I have a case (using brunch) where I want to handle data that's already been loaded into memory.

It might break the current interface, but I think it'd be a simple abstraction that could allow you to pass in an already-loaded file.

Unable to resolve module path from /home/shreya/react-native/imagePro/node_modules/get-pixels/dom-pixels.js: Module path does not exist in the Haste module map

The following article street in order to acquire an image from another domain,
Need to be modified two points:

• Server side header: "Access-Control-Allow-Origin: *"
• Client side img object: img.crossOrigin="Anonymous"

If it is good, please adopt here also.

getImageData() error The canvas has been tainted by cross-origin data - Stack Overflow
http://stackoverflow.com/questions/22097747/getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data/27840082#27840082

Hi,

On getPixels function, url param may also be a Buffer. But, on dom-pixels.js Line 120, it tries to get the extension from url.

var ext = path.extname(url)

When you send a Buffer as argument, path.extname function gives an error since url is not a string.

There has to be control whether the url is a path or not. typeof url or Buffer.isBuffer(url) may be used here.

var ext = typeof url === "string" ? path.extname(url) : null;

Otherwise, path.extname does not accept Buffer as an argument.

dom-pixels.js accepts the following types:

• '.GIF'
• anything else

node-pixels.js accepts the following types:

• 'image/png'
• 'image/jpg'
• 'image/jpeg'
• 'image/gif'
• 'image/bmp'

Clearly this is a problem if I want to run the same script on the server and client.

The node-pixels version seems more thought-out - perhaps this should be used instead for the client and the '.GIF' option should be deprecated and phased out in the next major version?

Please implement a limit for file sizes, so that somebody cannot consume too many resources by passing huge files.

Or should the calling program handle this?

It is better to upgrade to version > 0.4.0 so that other libraries depending on yours don't get vulnerable as well.

See CVE-2020-8175

Thanks!

get-pixels's specified jpeg-js version in the package.json is old (^0.1.1) and won't resolve to the latest version (0.2.0).

If the resolution of #26 in jpeg-js can happen soon I'd wait to publish a new get-pixels version. It's merged! This will make it possible to use uglifyjs on a client library importing get-pixels.

Currently, running uglifyjs fails because of jpeg-js's use of const.

Related issue in save-pixels - also undesirable that the two packages require different versions of jpeg-js.

Hi and thanks for these great tools!

This is less an issue with the actual library than it is with the documentation, both for get-pixels and ndarray. I can't see a clear way to get the 4-channel value of a pixel and its { x, y } position in the image. For example, let's say I transform a 256x256 image with get-pixels. If I want to get the [R,G,B,A] values as position { X: 100, y: 200 }, what is the proper way to do that? Are the values of the pixels laid out in rows, or columns? My inclination would be to try something like

const r = imageAsNdArray.data.get( x, y, 0 ),
  g = imageAsNdArray.data.get( x, y, 1 ),
  b = imageAsNdArray.data.get( x, y, 2 ),
  a = imageAsNdArray.data.get( x, y, 3 )

But this must be wrong, as I see that numbers greater than 3 in the third argument return valid results - clearly the third argument is not the channel. My other inclination was to treat this like a regular array:

It seems that calling .get with anything but 3 arguments gives undefined results. But its really not clear from any of the docs here on in ndarray, how to retrieve the 4 RGBA values of a pixel at given X, Y position.

Am I missing something? What is the magic trick? Can it be added to the README?

Hello, I'm trying to use get-pixels with Uint8array, but I'm stuck in this error.

TypeError: Path must be a string. Received {"0":255,"1":216,"2":255,"3":224,"4":0,"5":16,"6":74,"7":70,"8":73,"9":..........................255}

Types:
declare function getPixels(path: string | Uint8Array, type: string, callback: Callback): void

Test code:
const arr = new Uint8Array(path);

console.log(arr); //is a Uint8array

getPixels(arr, 'image/jpg', (err, pixels) => {
console.log(pixels);
});

Any suggestions ?

I expected the JPG image to have three channels. Renamed file to have JPEG extension, but same result. Any ideas? Cheers.

>         var img = "";
undefined
>         getPixels("test/images/file000555007525.jpeg", function(err, pixels) {
...             if(err) {
.....                 console.log("Bad image path");
.....                 return
.....             }
...             console.log("got pixels", pixels.shape.slice())
...             img = pixels;
...         });
undefined
> got pixels [ 2240, 1680, 4 ]
img
View3dbuffer {
  data: <Buffer 6c 88 c6 ff 6c 88 c6 ff 6a 88 c6 ff 6d 89 c7 ff 6d 8b c9 ff 70 8b cc ff 70 8e ce ff 72 90 d0 ff 6e 8e cd ff 70 90 cf ff 72 92 d1 ff 6e 8e cd ff 68 88 ... >,
  shape: [ 2240, 1680, 4 ],
  stride: [ 4, 8960, 1 ],
  offset: 0 }
>

I want to get image in sync mode.
how I can do this?

There is function of sync in this module?

There's been a lot of furore about this (which was, admittedly, easy to never hear about), but the important is this:

Lena herself has asked that people stop using her nude modeling photograph (yes, that's what it's a crop of) and just let the image live in the past where it belongs.

See https://en.wikipedia.org/wiki/Lenna#Criticism / https://www.sfgate.com/news/article/How-a-Nude-Playboy-Photo-Became-a-Fixture-14878319.php for some more details, but the lena image has no place in computer graphics anymore. There are plenty of better images to pick from. In this case, a https://placekitten.com image would work just as well, if not better.

Hi! See ericblade/quagga2#494

currently it is [height, width]

Request is really bloated, and since it seems to only be used here to make a simple GET request, we can easily replace it with something lighter like got or axios. See https://bundlephobia.com/[email protected]

bmp格式图片保存，在 node-pixels 第 97行和98行

  var bmpData = bmp.getData()
  var nshape = [ bmpData.getHeight(), bmpData.getWidth(), 4 ]

bmpData.getHeight() -> bmp.getHeight()
bmpData.getWidth() -> bmp.getWidth()

The current test suite is quite noisy due to the failing jpeg test. One idea I had for repairing it was to load it into another canvas context and compare the pixels from there. We can leverage both node-canvas and PhantomJS for this.

https://github.com/Automattic/node-canvas
http://phantomjs.org/

PhantomJS is an easier met dependency because there is a node_module which wraps PhantomJS and takes care of installation. Additionally, it is automatically added to PATH when using npm test thanks to npm scripts.

https://www.npmjs.org/package/phantomjs
https://www.npmjs.org/doc/misc/npm-scripts.html

What about image resources that have no extension information, such as these cute dogs from Google?

// Image resource without extension
https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbCMLPY5OhKVYQRaLoz6UMUoZe4e57SA01OCY_0eZEfiDUIBLxp4HUA6_S

When loading a JPG with get-pixels, colors are, more often than not a little bit off. Take this simple image and code, for example:

var fs = require('fs');
var getPixels = require('get-pixels');

getPixels("png_test.png", function(err, pixels) {
    for (var pixel = 0; pixel < 3; pixel++) {
        i = pixel * 4;
        console.log("R: " + pixels.data[i] + ", G: " + pixels.data[i + 1] + ", B: " + pixels.data[i + 2]);
    }
});

All it does is print out the what the RGB values of the first three pixels are, according to get-pixels. The result is:

R: 231, G: 183, B: 105
R: 212, G: 166, B: 103
R: 207, G: 162, B: 117

These colors are, in fact, all wrong. The actual colors of the first three pixels are (230, 183, 103), (211, 165, 103), (206, 162, 117). Most of the values are off by one or two! This is a bit of a problem, especially when doing color analysis. I assume it's due to a rounding error or a mistake in the JPEG interpretation algorithm somewhere.

I also tested with a PNG - the same small errors did not appear there, so I assume the problem is JPEG-specific.

Hello
With #25 you updated the pngjs dependency, but still the new version hasn't been published to npm.

A simple npm publish would get rid of the annoying deprecation warning.

Also, I recommend you to use npm version to bump versions. See: https://docs.npmjs.com/cli/version

Best regards

Xavier

getPixels() fails on large jpeg inputs with error: maxMemoryUsageInMB limit exceeded.

This error seems to come from jpeg-js, which accepts an options object for overriding the default memory limit: https://github.com/jpeg-js/jpeg-js#decode-options.

One solution would be to remove this limit altogether by always passing in an enormous value for maxMemoryUsageInMB when calling jpeg-js.

Similar to regl texture types that may be handy to have output format, for example:

getPixels(src, { format: 'alpha' }, cb)

Can be a channel alpha, red, green, blue, swizzles rg, rgb, rgba etc.

Possibly a matter of a separate package.

Problem solved. Code error
Sorry.

So we are trying to to use get-pixels on larger images but the array length is exceeding the maximum allowed length of js typed array. Could someone suggest a solution to this? Thanks!
cc @jywarren

When trying to opening an URL such as

http://www.sammobile.com/wp-content/uploads/2013/02/pixel-density-xperias.jpg?v=1

it gives

Error: Unsupported file type: .jpeg?v=140

Please support query string parameters. Some CDNs upload images in the same location, but with a new parameter to show the updated version.

Mr. Lysenko:

This site is a hobby:

This problem is the order of execution of the method. If you don't mind, Check a my fix pull request and that article...

Referenced:
XHR responseType = 'arraybuffer' Dosen't work - stackoverflow(japanese)
http://ja.stackoverflow.com/questions/2706/xhr-responsetype-arraybuffer-%E3%81%8C-firefox%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84?answertab=votes#tab-top

How can I make synchronous calls?

Like: var myImage = getPixels("image.png");

can you update to support async/await?

Given this roundtrip test:

import test from 'tape';
import ndarray from 'ndarray';
import getPixels from 'get-pixels';
import savePixels from 'save-pixels';

test('roundtrip', async (t) => {
	const pixelsIn = ndarray(new Uint8Array([
		255, 0, 0, 255,
		0, 0, 0, 255,
		255, 0, 0, 255,
		0, 0, 0, 255,
	]), [2, 2, 4]);

	const data: Uint8Array = await new Promise((resolve, reject) => {
		const chunks: Uint8Array[] = [];
		savePixels(pixelsIn, 'png')
			.on('data', (d: Uint8Array) => chunks.push(d))
			.on('end', () => resolve(Buffer.concat(chunks)))
			.on('error', (e: Error) => reject(e));
	});

	const pixelsOut: ndarray = await new Promise((resolve, reject) => {
		getPixels(data, 'image/png', (err: Error | null, pixels: ndarray) => {
			if (err) {
				reject(err);
			} else {
				resolve(pixels);
			}
		});
	});

	t.deepEqual(pixelsIn.shape, pixelsOut.shape, 'ndarray.shape')
	t.deepEqual(Array.from(pixelsOut.data), Array.from(pixelsIn.data), 'ndarray.data');
	t.end();
});

I was expecting the ndarray to match before and after, but got a different result. Have I misunderstood the usage here?

roundtrip

    ✔ ndarray.shape

    ✖ ndarray.data
    ---------------
      operator: deepEqual
      expected: [ 255, 0, 0, 255, 0, 0, 0, 255, 255, 0, 0, 255, 0, 0, 0, 255 ]
      actual:   [ 255, 0, 0, 255, 255, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255 ]
      at: <anonymous> (/Users/donmccurdy/ndarray-pixels/test/ndarray-pixels.test.ts:34:4)
      stack: |-
  Error: ndarray.data
  at Test.assert [as _assert] (/Users/donmccurdy/ndarray-pixels/node_modules/tape/lib/test.js:304:54)
  at Test.bound [as _assert] (/Users/donmccurdy/ndarray-pixels/node_modules/tape/lib/test.js:91:32)
  at Test.tapeDeepEqual (/Users/donmccurdy/ndarray-pixels/node_modules/tape/lib/test.js:545:10)
  at Test.bound [as deepEqual] (/Users/donmccurdy/ndarray-pixels/node_modules/tape/lib/test.js:91:32)
  at /Users/donmccurdy/ndarray-pixels/test/ndarray-pixels.test.ts:34:4
  at Generator.next (<anonymous>)
  at fulfilled (/Users/donmccurdy/ndarray-pixels/test/ndarray-pixels.test.ts:5:58)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)

https://www.npmjs.org/package/get-pixels

It seems that v3.1.0 has not been published yet.

Would be nice to provide various output data formats, not necessarily ndarray:

• array, float32array with 0..1 values
• uint8array directly

For example:
getPixels(src, { dtype: 'uint8' }, cb)