notmasteryet / jpgjs Goto Github PK

It would be nice if your script could support arithmetic coded JPEGs. Example: http://filmicgames.com/Images/Patents/bedroom_arithmetic.jpg

Chromium supports them natively, but Firefox does not. https://bugzilla.mozilla.org/show_bug.cgi?id=680385

It would be nice if your script did support them, so that browser support didn't matter.

Мой скрипт использует скрипт jpg.js
Но я заметил что артефакты сильные.
В браузерах они как-то сглаживаются...
http://jnglike.site40.net/

Прошу исправить библиотеку.
Вот картинки (советую XnView или JNG плагин).
http://jnglike.site40.net/new/

Я добавил еще свою функцию (если заметили) для ввода альфа-канала в библиотеку.

I'm getting an error with some JPEGs that I created in Mac OS X Preview. Your test images work fine. The error is:

TypeError: Cannot read property '0' of undefined
at quantizeAndInverse (/Users/josh/projects/node-pureimage/src/jpg.js:367:61)
at buildComponentData (/Users/josh/projects/node-pureimage/src/jpg.js:528:9)
at Object.parse (/Users/josh/projects/node-pureimage/src/jpg.js:790:19)
at Object.decode (/Users/josh/projects/node-pureimage/src/jpg.js:986:11)
at Object. (/Users/josh/projects/node-pureimage/tests/images.js:15:5)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)

Any idea what would cause this? If I load my image and some test images into Preview I see that my image has a lot more metadata in it, but the basic format seems the same.

This image is gray and black after parsing with jpg.js , what is going on?

12-bit is not handled because UInt8Array are used to store image data and the sampling is available only for 8-bit images

(ref mozilla/pdf.js#1991)

I'm trying to use MMCQ (Media Mean Cut Quantization) algorithm (from Leptonica library) to get the dominant colors from a jpeg image.
I cannot access canvas object and so I'm getting the image via XMLHttpRequest via Jpg.js like the following snippet:

var j = new JpegImage();
j.onload = function() {

                                // Image Data
                                var d = new Object();
                                d.height=350;
                                d.width=350;
                                d.data = new Array();

                                j.copyToImageData(d);

                                var pixels = d.data;
                                var pixelArray = [];
                                var quality = 10;
                                var pixelCount = d.height * d.width * 4;

                                for (var 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 pixel is mostly opaque and not white
                              if (a >= 125) {
                                  if (!(r > 250 && g > 250 && b > 250)) {
                                      pixelArray.push([r, g, b]);
                                  }
                              }
                          }

                                var cmap    = MMCQ.quantize(pixelArray, 8);
                          var palette = cmap.palette();
                                var colors = palette[0];
                                console.log( "JpegImage",$image.parent().parent().attr('id'), colors )

                                styleColors($image, colors);

                            };
                            j.load(imageURL);

Since I do not have the canvas imageData object I had to create one like

// Image Data
                                var d = new Object();
                                d.height=350;
                                d.width=350;
                                d.data = new Array();

and then copy the resulting ByteArray to the data array:

j.copyToImageData(d);

The problem here is that the dominant colors seems to be wrong, and I supposed this could be due the way I shift the jpeg pixels in the bytearray for R,G,B (Alpha channel will be ignored in Jpegs).
My validation dataset is the palette returned by this library https://github.com/lokesh/color-thief that obtain a correct result on PNG images.
The calculation of the MCQQ

var cmap    = MMCQ.quantize(pixelArray, 8);
var palette = cmap.palette();
var colors = palette[0];

is the same algorithm, that is taken from https://gist.github.com/nrabinowitz/1104622

I run into this error

if (fileMarker !== 65496) {
                    throw "SOI not found";
                }

Following the stacktrace it starts here when requesting a image

load: function load(path) {
            this._src = path;
            loadURLasArrayBuffer(path, function(buffer) {
                this.parse(new Uint8Array(buffer));
                if (this.onload) {
                    this.onload();
                }
            }.bind(this));
        },

Which is the root cause and how to debug it?

I have some concerns about the XMLHttpRequest element, since it is wrapped by a TVJS object:

https://developer.apple.com/library/tvos/documentation/TVMLJS/Reference/TVJSXMLHttpRequest_Ref/index.html#//apple_ref/javascript/cl/XMLHttpRequest

The underlyning object is a IKJSXMLHttpRequest object, that should be a wrapper for a native object of tvOS:

> XMLHttpRequest
< function IKJSXMLHTTPRequest() {
    [native code]
} = $1

Attached the debugger screenshot of the error, since I'm not able to get a better stacktrace.

From https://bugzilla.mozilla.org/show_bug.cgi?id=766138

JPEG error: unknown JPEG marker ffc1

From having a brief look through your code it looks as though it should be possible to implement basic scaling on decode in the manner in which libjpeg version 8+ does... Basically by changing the DCT block size from 8x8 to something else (1x1, 4x4, 16x16 etc) so that only the DCT coefficients necessary for the desired size are decoded, effectively scaling the image.

My suggestion is to allow the parser to to be initialized with optional width/height parameters. Obviously the output size will not always be the same as the input values but the next largest possible size for the given jpeg image.

My rationale for this is that for our particular use case we have to deal with some very large images that are only ever intended to be displayed at a far lower resolution than the source files. In which case jpg.js is just too slow to be useful and a lot of processing time is used decoding data which only gets stripped in the resize/resample process before display.

Implementing this should dramatically speed up the process in such cases

A document describing exactly what I am suggesting can be found here:

http://jpegclub.org/temp/Evolution_of_JPEG.doc

I would love to know your thoughts on the matter..

Line 803 seems to have a copy&paste typo:

component1Line = component1.lines[0 | (y * component1.scaleY * scaleY)];
component2Line = component1.lines[0 | (y * component2.scaleY * scaleY)];
                          ^

I have a nodejs project and am running into issues with jpgjs. On line 102 it never goes into the if statement:
if (typeof exports === "function") {
module.exports = {
JpegImage: JpegImage,
JpegDecoder: JpegDecoder,
JpxDecoder: JpxDecoder,
Jbig2Decoder: Jbig2Decoder
};
}

In the console typeof exports is 'object' not 'function'.

I am using Utif.js in my project which has jpgjs as a dependency and pulls it in with require('jpgjs') but it can't find it.

Other maybe useful notes: I am using npm version 8.9.4

Thank you

Hello,

when I try to decode this jpeg ( https://db.tt/iMnKml5e ), the process fails with the error "Uncaught unexpected marker: ffd9". Could you tell me why ?

Thanks for your work

Grégoire

In line 553, you have to change data => arr

Thanks

Loading progressive jpegs is possible but not really useful without a onprogress event. Would it be possible to add support for a onprogress event? This should deliver the partly loaded jpeg.
Note that this would require to load the binary data with overrideMimeType('text/plain; charset=x-user-defined') instead of arraybuffers. Otherwise you get a DOM exception for incomplete arraybuffers.