Giter Club home page Giter Club logo

jpeg-js's Introduction

jpeg-js CI status

A pure javascript JPEG encoder and decoder for node.js

NOTE: this is a synchronous (i.e. CPU-blocking) library that is much slower than native alternatives. If you don't need a pure javascript implementation, consider using async alternatives like sharp in node or the Canvas API in the browser.

Installation

This module is installed via npm:

$ npm install jpeg-js

Example Usage

Decoding JPEGs

Will decode a buffer or typed array into a Buffer;

var jpeg = require('jpeg-js');
var jpegData = fs.readFileSync('grumpycat.jpg');
var rawImageData = jpeg.decode(jpegData);
console.log(rawImageData);
/*
{ width: 320,
  height: 180,
  data: <Buffer 5b 40 29 ff 59 3e 29 ff 54 3c 26 ff 55 3a 27 ff 5a 3e 2f ff 5c 3c 31 ff 58 35 2d ff 5b 36 2f ff 55 35 32 ff 5a 3a 37 ff 54 36 32 ff 4b 32 2c ff 4b 36 ... > }
*/

To decode directly into a Uint8Array, pass useTArray: true in options decode:

var jpeg = require('jpeg-js');
var jpegData = fs.readFileSync('grumpycat.jpg');
var rawImageData = jpeg.decode(jpegData, {useTArray: true}); // return as Uint8Array
console.log(rawImageData);
/*
{ width: 320,
  height: 180,
  data: { '0': 91, '1': 64, ... } } // typed array
*/

Decode Options

Option Description Default
colorTransform Transform alternate colorspaces like YCbCr. undefined means respect the default behavior encoded in metadata. undefined
useTArray Decode pixels into a typed Uint8Array instead of a Buffer. false
formatAsRGBA Decode pixels into RGBA vs. RGB. true
tolerantDecoding Be more tolerant when encountering technically invalid JPEGs. true
maxResolutionInMP The maximum resolution image that jpeg-js should attempt to decode in megapixels. Images larger than this resolution will throw an error instead of decoding. 100
maxMemoryUsageInMB The (approximate) maximum memory that jpeg-js should allocate while attempting to decode the image in mebibyte. Images requiring more memory than this will throw an error instead of decoding. 512

Encoding JPEGs

var jpeg = require('jpeg-js');
var width = 320,
  height = 180;
var frameData = new Buffer(width * height * 4);
var i = 0;
while (i < frameData.length) {
  frameData[i++] = 0xff; // red
  frameData[i++] = 0x00; // green
  frameData[i++] = 0x00; // blue
  frameData[i++] = 0xff; // alpha - ignored in JPEGs
}
var rawImageData = {
  data: frameData,
  width: width,
  height: height,
};
var jpegImageData = jpeg.encode(rawImageData, 50);
console.log(jpegImageData);
/*
{ width: 320,
  height: 180,
  data: <Buffer 5b 40 29 ff 59 3e 29 ff 54 3c 26 ff 55 3a 27 ff 5a 3e 2f ff 5c 3c 31 ff 58 35 2d ff 5b 36 2f ff 55 35 32 ff 5a 3a 37 ff 54 36 32 ff 4b 32 2c ff 4b 36 ... > }
*/
// write to file
fs.writeFileSync('image.jpg', jpegImageData.data);

License

Decoding

This library builds on the work of two other JPEG javascript libraries, namely jpgjs for the decoding which is licensed under the Apache 2.0 License below:

Copyright 2011 notmasteryet

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Encoding

The encoding is based off a port of the JPEG encoder in as3corelib.

The port to Javascript was done by by Andreas Ritter, www.bytestrom.eu, 11/2009.

The Adobe License for the encoder is:

Adobe

Copyright (c) 2008, Adobe Systems Incorporated All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

  • Neither the name of Adobe Systems Incorporated nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Contributing

jpeg-js is an OPEN Open Source Project. This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

See the CONTRIBUTING.md file for more details.

Contributors

jpeg-js is only possible due to the excellent work of the following contributors:

AdobeGitHub/adobe
Yury DelendikGitHub/notmasteryet
Eugene WareGitHub/eugeneware
Michael KellyGitHub/mrkelly
Peter LiljenbergGitHub/petli
XadillaXGitHub/XadillaX
strandedcityGitHub/strandedcity
wmossmanGitHub/wmossman
Patrick HulceGitHub/patrickhulce
Ben WileyGitHub/benwiley4000

jpeg-js's People

Contributors

agenouel avatar ajbogh avatar at41 avatar benwiley4000 avatar brainbugfix avatar chupsy avatar crutchcorn avatar dependabot[bot] avatar dewep avatar donmahallem avatar dt-1236 avatar eugeneware avatar ffflorian avatar initerworker avatar mrkelly avatar patrickhulce avatar petli avatar promatik avatar rluba avatar sohomdatta1 avatar sparticvs avatar strandedcity avatar sunstradamus avatar tim-king avatar uzlopak avatar wmossman avatar xadillax avatar zed-0xff avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jpeg-js's Issues

Can't convert anything but Grumpycat.rgba

Hey,

I currently have the issue, that the JPG Encoder doesn't work with self-made RGBA Files, except for the bundled grumpycat.rgba. Not even the apsara.rgba works. Besides that no other Image works.

Any Help would be appreciated!

Thanks.

Colors for "RGB" JPEGs are color shifted

For example, http://web.archive.org/web/20020326220359id_/http://www2.warnerbros.com:80/zeta/borgs/domains/guard.emb has messed up colors without any alterations having been done.

request({url:"http://web.archive.org/web/20020326220359id_/http://www2.warnerbros.com:80/zeta/borgs/domains/guard.emb",encoding:null},function(err,response,buffer)
{
	var rawImageData = jpeg.decode(buffer).data;
	
	//Should be 86 86 248, a somewhat purplish blue. Instead it's 254 14 11
	console.log(rawImageData[0],rawImageData[1],rawImageData[2]);
})

I think what is happening is that it reads YCbCr values and for some reason converts them to RGB and caps them

Here are some other images with the same problem

http://web.archive.org/web/20010801155449id_/http://www2.warnerbros.com/zeta/borgs/objects/ro.sprite

http://web.archive.org/web/20020109174604id_/http://www.cyberworldcorp.com/Gallery/worlds/olympiad/objects/p_horse.sprite

https://bugs.chromium.org/p/chromium/issues/attachment?aid=53847

guard.emb

before

guard.emb.jpg

after

guard.emb.reencoded.jpg

ro.sprite

before

ro.sprite.jpg

after

ro.sprite.reencoded.jpg

p_horse.sprite

before

p_horse.sprite.jpg

after

p_horse.sprite.reencoded.jpg

image_processed00001.jpg

before

image_processed00001.jpg

after

image_processed00001.reencoded.jpg

How to resize width and height when encoding the jpeg?

I got decoded buffer from the jpeg.
The decoded JSON data is
{
width: 1700,
height: 690,
data: ...
}
I would like to encode it with keeping aspect ratio and max side to 1500.
I tried to it with hard coding but got bad image.

Is this out of jpeg-js library issue?

Result file is below:

result

incorrectly decoded data?

I was using a very simple 8 pixel image for some reference work, and noticed that the values that jpeg-js comes with aren't actually the right one. It's simply (255,0,0), (255,255,0), (0,255,0), (0,255,255), (0,0,255), (255,0,0), (255,255,255) and (0,0,0) in a row, loading these in several image viewers shows the correct pixel colors. However, running it through jpeg-js shows this instead:

{ height: 8,
  width: 1,
  data: <Buffer ff 01 03 ff fb ff 00 ff 00 ff 01 ff 02 fc fe ff 00 00 fd ff fe 01 fe ff ff fe fd ff 00 01 01 ff> }

it looks like the decoding matrix is generating some phantom values where those values should be zero.

I generated this file with photoshop CS6, as a progressive scanline jpg with 5 passes, at max quality (100%) which photoshop for some reason calls quality setting 12.

file used: http://pomax.nihongoresources.com/downloads/test.jpg

ES Modules Compatibility

Thank you for your job in this library!

I'd like to suggest making it ES module compatible, it wouldn't require much, just a matter of exporting the functions using the export function and importing modules using the import keyword.

My suggestion, to keep compatibility with Node is to have a single version that would then "compile" into the others (as there are versions of Node that still don't support ESM)

This change would also make it possible to use this library on Deno (https://deno.land/).

If you're willing to do it, I'm eager to help!

TypeError: Cannot read property 'precision' of undefined

If the provided JPEG has no SOF marker before the SOS marker the decode will crash line https://github.com/eugeneware/jpeg-js/blob/d340c1b2113328bdea955706e7c5f0bf0cad143b/lib/decoder.js#L97 as the frame is undefined.

To reproduce:

const jpeg = require("jpeg-js");
const buf = new Buffer("ffd8ffffffda", "hex");
jpeg.decode(buf);

I would help out with an PR but I am not sure where to implement the check and how extensive it should be as for example the SOI marker should appear before all the above or if just check if frame is defined inside the SOS handler.

Pull in decoder updates from pdf.js

pdf.js used by Firefox is a fairly well maintained fork of the same base file that the decoder is based on. It has a number of useful fixes including nice options for the colorspace outputs I mentioned in #3.

Here's the git history for the main file. I had a local branch that attempted to bring in a minimal diff since they've had a lot of style changes without significant logic changes, but it ended up failing a few tests. If we could get an automated flow going for pulling in updates that'd really ease the maintenance burden here. (They're also missing a few changes we've had like the progressive JPEG fix #25).

Support decoding with external JPEG tables

Hi! I'm looking into supporting the Photoshop JPEG extension in my TIFF decoder and would love to be able to use jpeg-js under the hood!
However, I am currently blocked because the TIFF JPEG compression allows to specify JPEG quantization and/or Huffman tables in a field separated from the main JPEG data. Would you be open to adding support for that in jpeg-js? I can work on it, but would like to be sure it will be accepted before I do, and maybe get some help on how to expose it in the API.

Support for JPEG's with Color Space CMYK

Hi,

I am using Jimp package which internally uses this package for Jpeg files. One issue I see that while compacting the images, the images with ColorSpace as CMYK, it blackens the image. Can you help in support for this kind of images.

I had logged the issue with Jimp here jimp-dev/jimp#88

Regards,
Manik Mittal

Throw early on unexpected inputs

I'm currently working on a library that depends upon this. Unless I've missed something, it doesn't seem to have any error handling? So if someone passes in an arbitrary string of text, it will quite happily try to chew through that and create a jpeg from it. I'm thinking it should maybe raise an error or something?

Support for react-native/non-node environments

Are there plans to support this package in a non-node environment? I was able to get this working in react-native by adding the "buffer" package, but I'm not sure if there's a good way to conditionally add dependencies based on environment

How to use the jpeg encoded data

The encoded data is interesting but I don't know how to use it. I can create an RGBA array and encode it but then what? What I'd like to do is be able to send it as a multipart/form-data. I've been doing that by creating a Blob. Here's what I thought would work:

var jpgInfo = jpeg.encode({
      data: myRGBA,
      width: 300,
      height: 300
    }, 50);
 var blob = new Blob( [jpgInfo.data], {type: 'image/jpg'} ) );

but it doesn't seem to be the right encoding the Blob constructor is expecting. I guess even knowing how to create a new jpg file from it would be nice.

SOI not found (start of the image) jpeg-js. React-native

Hi,
Can anyone help me find this error:

Error: SOI not found .... (SOI : start of the image)
It returns this error whenever I use the function jpeg.decode(rawImage,true)
the path of my image( which is base64 variable) is:

file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FDermaSom-87c250ab-f6ce-490d-b594-9b28ce51713f/Camera/83991dbd-9fd0-4983-9071-5e9a0cf94fe0.jpg

my code is here

const imageToTensor = (base64) => {
  const rawImageData = tf.util.encodeString(base64, "base64");
  const TO_UINT8ARRAY = true;
  const { width, height, data } = jpeg.decode(rawImageData, TO_UINT8ARRAY);
  const buffer = new Uint8Array(width * height * 3);
  let offset = 0; // offset into original data
  for (let i = 0; i < buffer.length; i += 3) {
    buffer[i] = data[offset];
    buffer[i + 1] = data[offset + 1];
    buffer[i + 2] = data[offset + 2];
    offset += 4;
  }
  return tf.tensor3d(buffer, [height, width, 3]);
};

Saving jpeg to file

What would be the way of saving jpegImageData (from the encoding example) to a file in the server? I tried this, but didn't work:

fs.writeFile("image.jpg",jpegImageData)

Support JPEG restart markers

Hi,
I'm getting this unknown JPEG marker error with files which seem to be ok, editing softwares like PS and others open it without a problem. Isn't there a way to ignore this error or something to be able to open theese images? (decoder.js line 757)

SOI not found jpeg-js with react-native-image-picker

const Buffer = require('buffer').Buffer;
global.Buffer = Buffer;
const  RNFS = require('react-native-fs');

  ImagePicker.launchImageLibrary({ mediaType: 'photo'},
(response) => {
    var base64 = response.data;
	var path = response.path;
	
	// check exists path and read file again
	RNFS.exists(path).then((exists) => {
	  if (exists) {
		RNFS.readFile(path, 'base64').then((res) => {
		// convert base64 to buffer
		   var jpegData = Buffer.from(res, 'base64'); 
		   
		   // Error DEOCDE : SOI  not found
		   var result = jpeg.decode(jpegData); 
		});
	  }
	});
});

i using react native , react-native-image-picker , jpeg-js , buffer , react-native-fs ,jsQR

SOI not found

Hi,
I'm using image-hash, a library which uses jpeg-js and I've encountered an issue with this lib.
When trying to hash some images I get this:

/Volumes/Crypt/www/project/node_modules/jpeg-js/lib/decoder.js:597
        throw "SOI not found";
        ^
SOI not found

For instance with this URL: https://i.pinimg.com/originals/6c/15/55/6c1555fe2fd5db94213a6629ae589068.jpg

Script to reproduce:

const imageHash = require('image-hash');

imageHash('https://i.pinimg.com/originals/6c/15/55/6c1555fe2fd5db94213a6629ae589068.jpg', 8, false, function(error, hash) {
  if (error) {
    console.error(error);
  }
  else {
    console.log(hash);
  }
});

Apparently, for some files, it can't find the SOI (Start of file), I don't know why.

https://github.com/eugeneware/jpeg-js/blob/master/lib/decoder.js#L597

If the "fileMarker" is different than 0xFFD8 then it fails...
Any idea ?
Should I edit the jpg to be sure to have a SOI ? How ?

Thanks a lot
Cheers

Error: unknown JPEG marker 0

Hi guys

I'm getting this error when trying to decode this file. I've attached the file.
2020-12-07-invalid-jpeg-marker

The stack trace is as follows:

Error: unknown JPEG marker 0
    at constructor.parse (SOME_PATH\node_modules\jpeg-js\lib\decoder.js:825:19)
    at Object.decode (SOME_PATH\node_modules\jpeg-js\lib\decoder.js:1096:11)
    at Object.<anonymous> (SOME_PATH\test\download-property.ts:37:6)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Module.m._compile (SOME_PATH\node_modules\ts-node\src\index.ts:493:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Object.require.extensions.<computed> [as .ts] (SOME_PATH\node_modules\ts-node\src\index.ts:496:12)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:840:10)

The jpeg opens fine in:

  • Windows 10 Photos
  • Microsoft Paint
  • Paint.NET
  • IE11
  • Google Chrome

But I get the following error trying to open the file in Photoshop CS6 (this old version is more sensitive to file issues):
image

What do you guys think?

Offload encoding to a Web Worker

A while back I asked the question, "Is it possible to generate an image (blob or data-url) in a web worker from a canvas context's getImageData?" My SO question

Using the encode.js file from this library, I was able to do exactly that. I published an npm package here and the associated github project here.

Would it make sense to add this functionality to this project?

Marker was not found

Hello there and thanks for this awesome package,
but I keep getting this error in one specific code example and don't know why.

...\node_modules\jpeg-js\lib\decoder.js:320
        throw "marker was not found";
        ^
marker was not found

The interesting fact is, that everything works fine in most cases, just in this one (example code below) I get that error. Sadly I can't see whats the problem but I would like to see this package to be stable and at the moment I'm not sure if this could occurr in other cases too.

So the problematic code is:

var fs = require("fs");
var jpg = require("jpeg-js");

// Create jpg
var name = "green.jpg";
var width = 80;
var height = 80;
var quality = 100;

var frameData = new Buffer(width * height * 4);
var path = __dirname + "/" + name;

for (var i = 0; i < frameData.length; i += 4) {
    frameData[i + 0] = 0x00; // red
    frameData[i + 1] = 0xFF; // green
    frameData[i + 2] = 0x00; // blue
    frameData[i + 3] = 0xFF; // alpha - ignored in JPEGs
};

var rawImageData = {
  data: frameData,
  width: width,
  height: height
};

// Write jpg
var jpgImageData = jpg.encode(rawImageData, quality);
fs.writeFileSync(path, jpgImageData.data, { encoding: "binary" }); // This should, btw, be somewhere included into the README.md
console.log("%s written.", name);

// Read jpg
var jpgData = fs.readFileSync(path);
var rawImageDataIn = jpg.decode(jpgData); // Throws "marker was not found"
console.log(rawImageDataIn);

The interesting part about this is, the exception only appears with some width and height values. Adjusting one of this values just one pixel is enough to get it running most times.

Out of Memory Error in parse()

The following script result in an out of memory error where the image header suggest a far larger file that in the data provided. The runtime snapshot below should provide some additional information. I haven't had time to dive deep into the code but I would suggest an early break if the offset in the parse method clearly exceeds the provided data length. The offset in this case is 726 when the Memory runs out and only 21 bytes are provided.

const jpeg = require("jpeg-js");
const buf = new Buffer("/9j/wSHEb88b4GDuAxgXZDQ5YzQx", "base64");
jpeg.decode(buf);

Same is valid for encoded buffer:

/9j/wK1WotT/4YD//3/a7H322Q==

memorydump

unknown JPEG marker e1

I'm getting this error when attempting to resize a particular jpeg. Unfortunately I'm unable to share the photo for privacy reasons.

"errorType": "Error",
"errorMessage": "unknown JPEG marker e1",
"methodName": "constructor",
"stack": [
"Error: unknown JPEG marker e1",
" at constructor.parse (/var/task/node_modules/jpeg-js/lib/decoder.js:825:19)",
" at Object.decode [as image/jpeg] (/var/task/node_modules/jpeg-js/lib/decoder.js:1096:11)",
" at Jimp.parseBitmap (/var/task/node_modules/@jimp/core/dist/utils/image-bitmap.js:196:53)",
" at Jimp.parseBitmap (/var/task/node_modules/@jimp/core/dist/index.js:431:32)",

Error: unknown JPEG marker c800

Hi,

When decoding a JPEG image from the Android camera emulation, I get this: Error: unknown JPEG marker c800. Could this fall in the "incorrect encoding" category?

Here is the image in base64 format:

/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIAbABDgMBIgACEQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAwQGBQII/8QAKxABAAICAgEDBAIABwAAAAAAAAECAwQFERITITEUIkFRBjJCUmFicYKR/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAED/8QAJBEBAQACAQIFBQAAAAAAAAAAAAECERIxUQMEExTwIUGhwfH/2gAMAwEAAhEDEQA/APn8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjFo7efU2NvFrZsmtr+PrZqY5mmPynqvlPxHc+0d/KWydRXFrZ47c08ePJsa2bFTJ/S16TEW+2tvb/rek/8AFon8wknh
uRrnyYJ0tiMuPv1KTjnun3+Hv+vvmK+/5nr59k549zSiLWtx25uTMa2rmyz6lcX2Ume7278aR/unxnqPmep6+HnNo7Ovji+bBkpXqk/dWY6i9fKv/tfeP3HvC8pvWxXF/NwnKa2auLY4/Zw5LYfqIrlxTSfS/wA/vH9fb5+EdON3cm/fRpp57bdJvW2CMc+dZrEzaJr8x1ET3+upTnjZvYqCf6PP9LbZjHM4K2rS2SvvFbWiZrE9fEzFbdR/pP6T24bkae99LPWIi0za1JiI8YrNu5/HUWrM/ryj9wvLHuKIkz4MursZNfPivizYrTTJjvXq1LRPUxMT8TE/hGoAAAAAAAAAAAAAAAAAAAAAAOnxnI4tPj+Y18tbzbd1K4MXjEdVtGfFk7n3+Osc/H56cwTLGZTVGh5nmOP5PV08dMV8WbHS2XPlph8Yy57VpE9185/NPe8THff9Kz331Z/kfCTv4prfcjVxbOxvUnPoYdiYy5vTicdsdr+N6RXH7X7rPc9+MdQxIxvl8LJO2/yu2k4ze4PHv7HIbW3ymttWib684Neub0Ms3t7+VstZtNa+Mxb2nynv/D9zlv5Bqb3B/TYceaNnP9H60XrEUx/TYLYa+NomZv5xbynuK+PXX3fLNi+hjcuVvz+/X5TbUa/P8ffj9fjtn6nHhtxU6GfNjx1valvrLbMWrWbRFo/rX3mvXcz79R2z/wAnw25/Y38VMtsO3tetkjNHnkw4/Xtk9OlptMT39lpt1E9xMe0Tbyy4nt8N29/2brrV5DDTjNfSw5c+Csxly7N8dfe+WYtWlf7RE0ivUdz7x6uT2tHUTpN3+WcPv15DBf6/Hj5bJsbG1kjFW0698uXBl8aU9SIvETg8fKZpMxfvr7YicKLn4GGVlvWG1/m9+nKc7yHIYqXx49rZyZq0vbytWLWmYiZ/M+/yoA1xxmMkn2QAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf/9k=

The image can otherwise be viewed here: https://codebeautify.org/base64-to-image-converter

DecodeBlock: Cannot read property '0' of undefined

Hello,

I'm using jimp, which use your library. I have a problem with some images, which, when I want to preview them with jimp, throw a JS error:

TypeError: Cannot read property '0' of undefined
    at decodeBlock (XXXXXXXXXXX\node_modules\jpeg-js\lib\decoder.js:264:51)
    at decodeScan (XXXXXXXXXXX\node_modules\jpeg-js\lib\decoder.js:298:11)
    at constructor.parse (XXXXXXXXXXX\node_modules\jpeg-js\lib\decoder.js:744:29)
    at Object.decode [as image/jpeg] (XXXXXXXXXXX\node_modules\jpeg-js\lib\decoder.js:1004:11)
    at Jimp.parseBitmap (XXXXXXXXXXX\node_modules\@jimp\core\dist\utils\image-bitmap.js:115:53)
    at Jimp.parseBitmap (XXXXXXXXXXX\node_modules\@jimp\core\dist\index.js:521:32)
    at new Jimp (XXXXXXXXXXX\node_modules\@jimp\core\dist\index.js:474:13)
    at _construct (XXXXXXXXXXX\node_modules\@babel\runtime\helpers\construct.js:30:21)
    at XXXXXXXXXXX\node_modules\@jimp\core\dist\index.js:1016:32
    at new Promise (<anonymous>)
    at Function.Jimp.read (XXXXXXXXXXX\node_modules\@jimp\core\dist\index.js:1015:10)
    ...

I'm pretty sure this is due to the fact that the image must have an invalid format, but it is nevertheless read by all the readers I've tested (Chrome, Paint, Photoshop, Windows Photos, ...).

And after trying to update your lib, so as not to call the function if the value is undefined, it works perfectly (my preview is generated by jimp):

function decodeBlock(component, decode, mcu) {
  var blockRow = (mcu / component.blocksPerLine) | 0;
  var blockCol = mcu % component.blocksPerLine;
  if (component.blocks[blockRow] !== undefined) {
    decode(component, component.blocks[blockRow][blockCol]);
  }
}

I'm doing this issue rather than a PR because I don't know anything about the JPEG format, and I don't know if it can have unintended consequences. What do you think about that? Is it possible to fix it? If my if is enough, I can of course do the PR to help you.

I would have appreciated being able to share these images to show you an example of the issue, but these images are private. And if I edit them to remove the private parts, the problem disappears...

how to read jpeg from url and then decode it?

Thank for the awesome work on this library first of all, I read the documentation and dont see any decode options from the url directly. I have a JPG image and was wondering what would be the right way to decode it from a url into an RGBA 1d array for processing, any suggestions are highly appreciated

Support streaming output

I am interested in adding or moving to streaming output for jpeg-js. Would it be possible to add that functionality inside of jpeg-js? It should be easily done by moving from pushing onto an array to pushing onto a stream:

https://github.com/eugeneware/jpeg-js/blob/v0.0.4/lib/encoder.js#L278-L282

https://github.com/eugeneware/jpeg-js/blob/v0.0.4/lib/encoder.js#L690

http://nodejs.org/docs/v0.10.32/api/stream.html#stream_class_stream_writable

For [email protected] support, we can use the readable-stream library

https://github.com/isaacs/readable-stream

TypeError: Cannot read property 'index' of undefined

When parsing the hex encoded buffer

ffd8ffc4ad00008000f2eafbcc5d56a24e960fd9d4daec7df6c4

the library does crash within an error while trying to build the huffman table. In lines
https://github.com/eugeneware/jpeg-js/blob/6bc12b0753aea139f5e739b37842bac58762c16a/lib/decoder.js#L69-L70
p.index will be larger than 0 but the code array will already be empty. Which will fill p with an undefined from the empty pop(). This throws an

TypeError: Cannot read property 'index' of undefined

in line 69.

what's the raw data format?

the example suggests the raw data has the same format as the HTML canvas, namely one [r,b,g,a] cluster per pixel. Is that true? (if so, can the README be amended with that information?)

When decoding the file it is different(?) from what it supposed to be

Hello, I am trying to understand why the encoded data bytes are different from what I encoded.

For instance, I am generating an image with starting values (as RGBA )[0, 0, 85, 255, ...] and this should be somewhat dark purpe-ish colour. However, it is shown as a bright teal-blue colour. When I inspect the decoded result I see that instead of [0, 0, 85, 255, ...] it is coded as [8, 78, 255, 255, ...]. Am I missing something about the encoding/decoding process?

I tried to play with colorTransform, formatAsRGBA, tolerantDecoding when decoding but, the result did not differ much.

If it helps here is my full data:

Encoded Data:
[0,0,85,255,0,0,50,255,0,0,70,255,0,0,115,255,0,0,100,255,0,0,71,255,0,0,86,255,0,0,107,255,0,0,88,255,0,0,49,255,0,0,47,255,0,0,110,255,0,0,108,255,0,0,69,255,0,0,86,255,0,0,116,255,0,0,82,255,0,0,102,255,0,0,87,255,0,0,103,255,0,0,88,255,0,0,87,255,0,0,118,255,0,0,57,255,0,0,69,255,0,0,70,255,0,0,69,255,0,0,107,255,0,0,76,255,0,0,49,255,0,0,65,255,0,0,113,255,0,0,122,255,0,0,118,255,0,0,111,255,0,0,102,255,0,0,51,255,0,0,57,255,0,0,77,255,0,0,90,255,0,0,81,255,0,0,110,255,0,0,115,255,0,0,61,255,0,0,48,255,0,0,48,255,0,0,48,255,0,0,48,255,0,0,48,255]

Decoded Data:
[0,77,251,255,0,71,239,255,0,76,237,255,0,91,251,255,8,97,255,255,7,88,255,255,3,75,255,255,9,101,255,255,0,90,255,255,0,86,250,255,0,93,254,255,6,97,255,255,1,90,255,255,0,79,255,255,13,102,255,255,0,88,255,255,0,79,246,255,0,84,245,255,0,90,248,255,0,88,247,255,0,86,248,255,1,85,255,255,0,73,250,255,0,68,240,255,0,78,245,255,0,92,251,255,0,98,252,255,0,103,252,255,0,82,255,255,0,70,249,255,0,68,249,255,8,83,255,255,19,99,255,255,16,108,255,255,9,115,255,255,0,86,255,255,0,71,250,255,0,63,251,255,10,71,255,255,18,81,255,255,12,87,255,255,2,91,255,255,1,94,255,255,0,72,249,255,0,52,245,255,1,48,254,255,6,50,255,255,0,52,254,255,0,59,247,255]

Any help would be much appreciated.

jpeg-js is now an Open Open Source Project

Hi everyone,
@mrkelly @strandedcity @patrickhulce @XadillaX @petli @wmossman @benwiley4000

I've just released jpeg-js as an Open Open Source Project

This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

See the CONTRIBUTING.md file for more details.

This has been done in order to scale the maintenance of small but popular node.js modules like jpeg-js and also to put the governance and control of the project into the hands of it's user and greatest stakeholders.

As a result, all past contributors (ie. you've landed a commit into jpeg-js) have been given contributor (ie. commit access) to this repo.

You should have been sent an invite which you need to accept to get contributor access.

The includes the following fine people, which are also listed on the README under the contributor list.

jpeg-js is only possible due to the excellent work of the following contributors:

AdobeGitHub/adobe
Yury DelendikGitHub/notmasteryet
Eugene WareGitHub/eugeneware
Michael KellyGitHub/mrkelly
Peter LiljenbergGitHub/petli
XadillaXGitHub/XadillaX
strandedcityGitHub/strandedcity
wmossmanGitHub/wmossman
Patrick HulceGitHub/patrickhulce
Ben WileyGitHub/benwiley4000

I've been personally struggling to stay across the open issues for this project, so as contributors, please feel free to help to triage, review, resolve issues as you see fit :-)

And once again, a huge thanks for all your support and contributions of this project!

Currently I've added anyone that I could guess their npm usernames to also have npm publish rights as well. If you haven't been added correctly let me or any of the other owners know and we'll sort that out.

Cheers,

Eugene

bug: infinite loop/memory leak

Hey there, found the following bug/infinite loop/oom that can be reproduced with the following code:

const jpeg = require('jpeg-js');
jpeg.decode(Buffer.from('ffd8ffc09dfdb0ffff0e5296bd7fbbc4f9579096bd7fbbfc0e80d50000ffff36fa400100236701bf73ffaf8003a57f097f5e000000008023c4f9579096bd7fbb008000001500b34e8c018fda5212', 'hex'))

found using jsfuzz

JPEG size increase on save

const fs = require('fs')
const jpeg = require('jpeg-js');

const buffer = fs.readFileSync('./exampleImages/npm.jpg')
const jpg = jpeg.decode(buffer)

const outBuffer = jpeg.encode(jpg, 100)

fs.writeFileSync('test.jpg', outBuffer.data)

console.log(buffer.byteLength, jpg.data.byteLength, outBuffer.data.byteLength)

OUTPUT:

20259 2764800 87636

it gets almost 4 times bigger!

performance: make memory re-usable instead of allocating new memory for every image decoded

Maybe it also applies to encoding too, but I just looked at the decoder code.

These lines:

https://github.com/eugeneware/jpeg-js/blob/a2f7080781a5539c65c2b42927cae28f1f051be5/lib/decoder.js#L1095-L1097

If we allow the user to send in an ArrayBuffer, and as long as the size of it is big enough to fit the image data, then jpeg-js could simply write data to it.

This part will be 400% faster on the 2nd...Nth invocations of decode() based on similar stuff I've done in other projects.

Use case: this is useful, for example, when processing frames of a live video feed, frame by frame as they stream in.

Can i use it on react native?

Hi,

Im trying to use jpeg-js with RNFS (https://github.com/johanneslumpe/react-native-fs) in this way:

RNFS.readFile(path).then(file => {
      console.log(file);
      const rawImageData = jpeg.decode(file);
      console.log(new Buffer(rawImageData).toString('base64'));
    });

Bur when I try his, i get this error.
image
Is possible to use this library to read an image and get a bitmap, specifically I am trying to do analysis pixel by pixel images

Thanks

TypeError: Cannot read property 'precision' of undefined

Hi,

I got the following error with the provided input:

input:/Users/cydarien/Documents/test/jpeg/node_modules/jpeg-js/lib/decoder.js:95
    var precision = frame.precision;
                          ^

TypeError: Cannot read property 'precision' of undefined
    at decodeScan (/Users/cydarien/Documents/test/jpeg/node_modules/jpeg-js/lib/decoder.js:95:27)
    at constructor.parse (/Users/cydarien/Documents/test/jpeg/node_modules/jpeg-js/lib/decoder.js:744:29)
    at Object.decode (/Users/cydarien/Documents/test/jpeg/node_modules/jpeg-js/lib/decoder.js:1004:11)
    at Object.<anonymous> (/Users/cydarien/Documents/test/jpeg/test.js:5:6)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
    at Module.load (internal/modules/cjs/loader.js:1105:32)
    at Function.Module._load (internal/modules/cjs/loader.js:967:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47

Code:

const jpeg = require('jpeg-js');
var fs = require('fs');

var buf = fs.readFileSync('crash');
jpeg.decode(buf);

crash.zip

test directory in npm

When looking through node_modules for a project of mine, looking for large packages, I saw that your package has a test directory with 4.3MB of data in it. Maybe you could include a .npmignore or only whitelist the files in lib and index.js with package.json "files"? Because your package could be as small as 60kb or something.

JPEG image is "blocky"

First, thanks very much for your library, which I am using in Jimp. Without this library and pngjs Jimp would not be possible.

An issue was raised about the picture below being "blocky" when it is decoded (especially the blurry background elements): jimp-dev/jimp#134

A test case using Jimp is as follows:

var Jimp = require("jimp");

Jimp.read("image.jpg").then(image => {
    image.quality(100).write("out.png");
});

If I convert the image to a PNG using GIMP and perform the same test on that image then the issue doesn't present. For that reason I think the issue lies here.

image

RangeError [ERR_INVALID_OPT_VALUE]

If you try to decode an image too large an Error is raised due to the limitation of Buffer not being able to store enough bytes. The corresponding line is:
https://github.com/eugeneware/jpeg-js/blob/d340c1b2113328bdea955706e7c5f0bf0cad143b/lib/decoder.js#L1013-L1014

To reproduce run:

const jpeg = require("jpeg-js");
const buf = new Buffer("ffd8ffc2b6fc24ffc2b60000ffffd9d4d83569e9", "hex");
jpeg.decode(buf);

which will raise

RangeError [ERR_INVALID_OPT_VALUE]: The value "12202258432" is invalid for option "size"

I tried the convservative memory branch/patch and it doesn't trip. I still breaks at this point.
Unfortunately the max buffer size is determined due to the runtime(32bit/64bit system etc) and only the node enviromnet offers an option to aqcuire the current size via kMaxLength.

Can we decode base64 images directly?

I am sending base64 encoded images to the server, how can I get rawImageData from them. Preferably without saving them into the filesystem first.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.