image-js / tiff Goto Github PK
View Code? Open in Web Editor NEWTIFF image decoder written entirely in JavaScript
License: MIT License
TIFF image decoder written entirely in JavaScript
License: MIT License
Hello,
I have been looking for an npm package that is able to handle multi-page tiff files. Both the .pageCount() & .isMultiPage() are working great but I am getting an Unsupported bit depth / sample format error when trying to decode. Looking at the code I can see that it is because my tiff files are 1bit depth B&W files.
Is there any plans for support for these time of documents?
Thanks!
@targos How can I use this correspondance table in another project :
https://github.com/image-js/tiff/blob/main/src/tags/standard.ts ?
The purpose is to get ifd.fields
and ifd.map
without duplicates
Hello! We are trying to read a TIFF compressed with the deflate algorithm. Unfortunately, it fails with the following error. I can't seem to find whether this library does or does not support deflate. Could you provide some details on the state of it and whether there are plans to support it?
It would help us knowing whether the image is somehow malformed or otherwise.
Uncaught (in promise) Error: invalid compression: 8
readStripData tiffDecoder.js:195
decodeImageData tiffDecoder.js:145
decodeIFD tiffDecoder.js:94
decode tiffDecoder.js:48
decodeTIFF index.js:4
loadTIFF load.js:144
loadBinary load.js:48
load load.js:31
convertReturnImage ImageUploader.vue:284
upload ImageUploader.vue:370
promise callback*upload ImageUploader.vue:368
VueJS 4
clickButton vuesax.common.js:1657
click vuesax.common.js:1529
VueJS 33
Is there a way to read/iterate through all TIFF tags in a tiff file with this library?
When I try to decode a 32 page TIFF file (either LZW compressed or uncompressed), I get very poor performance. The decoding takes over a minute and in that time, it blocks the main thread freezing the whole page.
Here is a link to the compressed file. I didn't want to upload the uncompressed file as it's about 1 GB in size. The uncompressed file can be obtained using:
magick convert <compressed file> -compress none uncompressed.tiff
It would be very nice if Float32 images could be used, since some scientific applications uses these kind of formats. For example, UAV Imagery.
I attach a photo in order to test the changes.
float32.zip
Looking at the spec: https://www.fileformat.info/format/tiff/corion-lzw.htm
The function GetNextCode() retrieves the next code from the LZW-
coded data. It must keep track of bit boundaries. It knows that
the first code that it gets will be a 9-bit code. We add a table
entry each time we get a code, so GetNextCode() must switch over
to 10-bit codes as soon as string #511 is stored into the table.
We need to change the code length as soon at #511 is stored.
However in the code the change is done at 510:
Lines 94 to 96 in 73ca971
I don't know what is the correct version but the confusion could be due to TIFF version:
https://stackoverflow.com/questions/26366659/whats-special-about-tiff-5-0-style-lzw-compression
The current implementation in 'debug-lzw' branch seems however correct based on the lzw images we have and the comparison with convert
from imagemagick.
Error message:
Uncaught TypeError: Cannot read property 'length' of undefined at TIFFDecoder.readStripData (.../node_modules/tiff/lib/tiffDecoder.js:180:42) at TIFFDecoder.decodeImageData (.../node_modules/tiff/lib/tiffDecoder.js:151:22) at TIFFDecoder.decodeIFD (.../node_modules/tiff/lib/tiffDecoder.js:100:18) at TIFFDecoder.decode (.../node_modules/tiff/lib/tiffDecoder.js:54:30) at Object.decodeTIFF [as decode] (.../node_modules/tiff/lib/index.js:10:20)
This error appeared when I decode a very big image (21600 x 21600 px).
I have decoded this file: Link and the output is Preview or Download
the source code for getting image/png file is:
/** buffer is of type ArrayBuffer which is read from sample file */
const tiffIfds = decode(buffer);
const first = tiffIfds[0];
const canvas = document.createElement("canvas");
canvas.width = first.width;
canvas.height = first.height;
const ctx = canvas.getContext("2d", { alpha: first.alpha });
const imageData = ctx?.createImageData(canvas.width, canvas.height);
imageData?.data.set(first.data);
ctx?.putImageData(imageData!, 0, 0);
const pngImage = canvas.toDataURL("image/png");
const imgEl = document.getElementById("my-image") as HTMLImageElement;
if (imgEl) imgEl.src = pngImage;
and the HTML markup is simple as:
<div>
<img id="my-image" />
</div>
By default we would parse all the images but we could as well have an option that is an array of pages to retrieve.
This would allow to get only the first images of a stack for example.
Cannot upload the tiff file here, hence here is the link to download the file which caused the crash: https://drive.google.com/file/d/1xF1Jwu33sIOc6EjgGnUge0KhgQ_ZzfFb/view?usp=sharing
Found by jsfuzz.
Hello,
I am trying to use image-js with ESM from an Angular application.
I get the following error:
ERROR in ../node_modules/tiff/lib-esm/tiffDecoder.js 13:12
2021-10-11T22:10:54.877685815Z Module parse failed: Unexpected token (13:12)
2021-10-11T22:10:54.877688343Z You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
2021-10-11T22:10:54.877690795Z | };
2021-10-11T22:10:54.877693407Z | export default class TIFFDecoder extends IOBuffer {
2021-10-11T22:10:54.877695648Z > _nextIFD;
2021-10-11T22:10:54.877697974Z | constructor(data) {
2021-10-11T22:10:54.877700254Z | super(data);
If I take a look at tiff/lib-esm/tiffDecoder.js, I see:
import { decompressZlib } from './zlib';
const defaultOptions = {
ignoreImageData: false,
onlyFirst: false,
};
export default class TIFFDecoder extends IOBuffer {
_nextIFD;
constructor(data) {
super(data);
this._nextIFD = 0;
}
//...
_nextIFD
declaration is not supported by the bundler.
This is the config used by tiff library:
rhousni@rhousni:~/projects/tiff$ tsc --showConfig --project tsconfig.esm.json
{
"compilerOptions": {
"esModuleInterop": true,
"moduleResolution": "node",
"sourceMap": true,
"strict": true,
"target": "esnext",
"module": "es6",
"outDir": "./lib-esm",
"declaration": false
},
"files": [
"./src/horizontalDifferencing.ts",
"./src/ifd.ts",
"./src/ifdValue.ts",
"./src/index.ts",
"./src/lzw.ts",
"./src/tiffDecoder.ts",
"./src/tiffIfd.ts",
"./src/types.ts",
"./src/zlib.ts",
"./src/tags/exif.ts",
"./src/tags/gps.ts",
"./src/tags/standard.ts"
],
"include": [
"./src/**/*"
],
"exclude": [
"./src/**/__tests__"
]
}
So I guess JS class variable declaration is only supported in a future ECMAScript version.
Changing the TS target to es2017
fixes the issue. Would you accept a PR for this?
I am trying to use this to count the number of pages in a tiff document. This works fine in Chrome & FF but IE gives an error. When I googled I found that the object notation should be proper({key: value}) for IE. The IE debugger points to this line:
const tags = {
standard,
exif,
gps
};
Can this be changed to :
const tags = {
standard: standard,
exif: exif,
gps: gps
};
I tried to use this on a tiff that a neuroscientist gave me and got an unsupport bit depth error. I believe it's because my tiff is 32-bit. Would this be easy to implement?
While trying to open 16 bits images I noticed that sometimes stripByteCounts is undefined in IDF and readStripData fails because of that.
In my case the image contains only one strip so setting stripByteCounts to the size of the buffer (minus the offset) is fixing the issue but not sure you'll choose this approach.
const stripByteCounts = ifd.stripByteCounts ? ifd.stripByteCounts : [this.byteLength - this.byteOffset - stripOffsets[0]];
Thanks
An instrument generates the following uncompressed files that seems however problematic
Eimg_000000004_03-GFP_000.tif.zip
identify Cimg_000000008_03-GFP_000.tif
Cimg_000000008_03-GFP_000.tif TIFF 1360x1024 1360x1024+0+0 16-bit Grayscale Gray 2.798MB 0.000u 0:00.000
identify: Unknown field with tag 50838 (0xc696) encountered. `TIFFReadDirectory' @ warning/tiff.c/TIFFWarnings/887.
identify: Unknown field with tag 50839 (0xc697) encountered. `TIFFReadDirectory' @ warning/tiff.c/TIFFWarnings/887.
Would still be nice if we could open them with the library
I am trying to decode this file test_pattern.zip
let {decode} = require('tiff')
decode(fs.readFileSync('./test_pattern.tiff'))
I get
Error: Unsupported lzw: undefined
at unsupported (C:\projects\image-decode\node_modules\tiff\lib\index.js:870:10)
Not sure this error is valid.
We need to make a kind of kinetic based on image analysis and the instrument generate a tiff containing a stack of pictures.
Would it be easy to add support for parsing such files ?
Make a PR where:
TiffIfd
type--For some reason, the picture cannot be offered...
RangeError: offset is out of bounds
at Uint8Array.set ()
at Object.mmap (tiff.min.js:950)
at Object.mmap (tiff.min.js:999)
at ___syscall192 (tiff.min.js:1065)
at Li (tiff.min.js:1575)
at Array.Aa (tiff.min.js:1981)
at rd (tiff.min.js:1146)
at _TIFFOpen (tiff.min.js:3166)
at Object.Yh [as ccall] (tiff.min.js:112)
at new Lb (tiff.min.js:3183)
tiff.min.js:105 RangeError: offset is out of bounds
at Uint8Array.set ()
at Object.mmap (tiff.min.js:950)
at Object.mmap (tiff.min.js:999)
at ___syscall192 (tiff.min.js:1065)
at Li (tiff.min.js:1575)
at Array.Aa (tiff.min.js:1981)
at rd (tiff.min.js:1146)
at _TIFFOpen (tiff.min.js:3166)
at Object.Yh [as ccall] (tiff.min.js:112)
at new Lb (tiff.min.js:3183)
tiff.min.js:102 Uncaught abort({}) at Error
at wf (http://seikichi.github.io/tiff.js/tiff.min.js:89:367)
at Vc (http://seikichi.github.io/tiff.js/tiff.min.js:101:412)
at ___syscall192 (http://seikichi.github.io/tiff.js/tiff.min.js:1066:155)
at Li (http://seikichi.github.io/tiff.js/tiff.min.js:1575:41)
at Array.Aa (http://seikichi.github.io/tiff.js/tiff.min.js:1981:431)
at rd (http://seikichi.github.io/tiff.js/tiff.min.js:1146:252)
at _TIFFOpen (http://seikichi.github.io/tiff.js/tiff.min.js:3166:490)
at Object.Yh [as ccall] (http://seikichi.github.io/tiff.js/tiff.min.js:112:19)
at new Lb (http://seikichi.github.io/tiff.js/tiff.min.js:3183:87)
at FileReader. (http://seikichi.github.io/tiff.js/upload.html:47:20)
If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.
How I can get an image from TiffIfd and then show it in browser?
It would be interesting to have an option to always return 4-component alpha representation, even if the image is only 3-channel. The idea being that you can then directly use the Uint8Array's buffer to create a Uint8ClampedArray to be fed into a canvas's ImageData.
If PhotometricInterpretation (262) is WhiteIsZero (0), an exception is raised at decodeImageData().
I want you to support WhiteIsZero.
With the last release of the tiff library a gray scale tiff is not decoded correctly (data.length = 0)
Is there any fully bundled version of this project?
If not, Is it possible?
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.