notmasteryet / jpgjs Goto Github PK
View Code? Open in Web Editor NEWJPEG/DCT data decoder
License: Other
JPEG/DCT data decoder
License: Other
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:
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.
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.
(ref mozilla/pdf.js#1991)
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.
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
12-bit is not handled because UInt8Array are used to store image data and the sampling is available only for 8-bit images
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)];
^
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..
In line 553, you have to change data => arr
Thanks
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.
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
Мой скрипт использует скрипт jpg.js
Но я заметил что артефакты сильные.
В браузерах они как-то сглаживаются...
http://jnglike.site40.net/
Прошу исправить библиотеку.
Вот картинки (советую XnView или JNG плагин).
http://jnglike.site40.net/new/
Я добавил еще свою функцию (если заметили) для ввода альфа-канала в библиотеку.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.