photopea / utif.js Goto Github PK

Hi,

I'm encountering this issue encodeImage TIFF with compression G4 not work.
Could you please check it?

UTIF.encodeImage(
            rgba,
            width,
            height,
            { t259: [4] }
          )

Thank you very much!

Looking at the readme it suggests that DNG should also work and I see the LosslessJpegDecode has been included however after much pulling out of hair I can't get it to work.
Tried it with UTIF.replaceDngIMG method but that seems to only work with ifds[0] and DNG I think uses ifds[1] for the full image. With ifds[1] it works upto the UTIF.decodeImages part but then the rgba object is just full of 0's - I think at some stage I got an image when using ifds[0] but of course with dng that is a smaller sub-image - please advide if I am missing a simple trick or whether different code is required. I have attached a test image which does work on Photopea online (it is non compressed dng within the zip).

Cheers.

test.dng.zip

Hi,
I noticed that you just released version 3.0.0 on npm, where decodeImages becomes decodeImage.
The problem is: the fingerprint of the function changes
UTIF.decodeImages = function(buff, ifds) // 2.0.1
UTIF.decodeImage = function(buff, img, ifds) // 3.0.0

but the documentation doesn't cite it. I just created a pull request on @types/utif in order to help Typescript users and I just guessed the second parameter's description with * param img the image file directory to be decoded but I'd love a complete description the readme.md here :)

How would I encode EXIF data back into the tiff file on encode? The readme mentions that you can do it but not how.

It's a very simple fix to change the type of the img variable to Uint8ClampedArray as I don't think it should ever not be clamped (If I understood the code correctly).

Also, the Readme does state that the return of toRGBA8 is ready to use in context2d.putImageData() etc., which is not true as putImageData requires an ImageData object whose constructor only accepts clamped arrays.

I decided to convert from Uint8Array to Uint8ClampedArray but it's obviously really slow, so a fix would be appreciated.

Edit: Created a pull request.

Is there a way to determine the pits per channel of a tif file? For example I am thinking it would be nice to have something like ifds[0].bitDepth like UTIF has ifds[0].width.

In order to support JPEG greyscale images please update the following line(within _decodeNewJPEG function) from:

img["t262"][0] = 2;

to:

if(img["t262"][0] == 6){
img["t262"][0] = 2;
}

The TIFF image I'm trying to decode and then re-encode is a 16bit grayscale raw image from a scanner.

I have a code simple as this:

const UTIF = require('utif');
const fs = require('fs');

const imageData = fs.readFileSync('image.tif');

const ifds = UTIF.decode(imageData);
UTIF.encode(ifds);

It throws me the this error:

Error: unknown type of tag: 254
    at Object.UTIF._writeIFD (/Users/andormade/git2/tiff-invert/node_modules/utif/UTIF.js:877:84)
    at Object.UTIF.encode (/Users/andormade/git2/tiff-invert/node_modules/utif/UTIF.js:74:20)

I wasn't able to attach the TIFF file, because it's too big, but you can download it from this link: https://www.dropbox.com/s/tyfro4ybwqd2x14/image.tif

So, I started using this lib. First of all, it's awesome, and thanks for your work, you saved me a lot of time :)

BUT I might have discovered a potential bug on line 75, it says:
else if(cmpr==8) { var src = new Uint8Array(data.buffer,off,len); var bin = pako["inflate"](src);

I don't know what it means if cmpr == 8, maybe it's not a popuplar format/compression, but if someone tries your lib with that specific TIFF file, they could have a problem. I checked, pako is undefined here, so it might tries using pako.js https://github.com/nodeca/pako/ ?

I don't see pako.js in your repo anywhere, so it might causes errors on your projects, too, if they use this lib.

Anyway, I think it wouldn't be so hard to include the needed pako.js functions, so I highly recommend doing that :)

Keep up the great work

What's the correct way to import UTIF.js in a single page application?

I get the following error in console:
Error in mounted hook: "TypeError: Cannot read property 'replaceIMG' of undefined"

Full code here:
https://gist.github.com/dosstx/5dbe76220a3126cb84f7ed12c610015c

Hi, I am using UTIF on a project and just created an image with Irfanview.
tif.zip
Looks like it uses compression 3, but it doesn't work on my application nor on Photopea.
Is it a bug or isn't it expected to work?

A small, fast and - the code in this package may be small but the bundle is HUGE!

Total unminified code added by UTIF: 441.35kb 😭

https://bundlephobia.com/[email protected]

I'd suggest:

• moving to jpeg-js as it is a bit smaller and a little more widely used. and it's on the registry
• removing pako you only use it on one line and may be able to find something smaller

I have files like png, gif, jpeg, pdf, and I need to be able to compile all of these into 1 tiff file. Can we use this library to do that?

At the top of UTIF.js, we have:

// Make available for import by `require()`
if (typeof module == "object") {module.exports = UTIF;}
else {window.UTIF = UTIF;}

var pako, JpegDecoder;
if (typeof require == "function") {pako = require("pako"); JpegDecoder = require("jpgjs").JpegDecoder;}
else {pako = window.pako; JpegDecoder = window.JpegDecoder;}

To make it work in service workers requires adding just 1 line:

if (typeof window === 'undefined' && typeof self !== 'undefined') window = self;

Any thoughts before I submit a pull request?

I have been trying to use this software with the attached .tiff image. The image is successfully converted, but it appears that the colors are inverted. I've attached the pre-encoded image and the encoded image.

W1829067576_15.IMG.tiff.zip

I am thinking about the feasibility of using bigTIFF image format for very large image sequence, and I would like to have your opinion on the following aspects:

1. add big tiff support according to the bigTIFF standard. Would this be possible? Even better thing is to have the "OME-XML metadata" supported, but that should not be a problem.

2. we need to streaming data from the disk rather than try to load the entire file into memory. After a quick investigation on this library, I think I need to first read the ifds with UTIF.decode, then, when the user request a certain frame, the decode the requested frame on demand by reading the requested block of file from the disk, and decode it with UTIF.decodeImages. The question is, would it be possible to determine the number of frame first without loading the whole file or searching through the whole file? Is it feasible for the current library to do that?

A related question is that, currently, I tried to use Photopea to load a big file(<4GB) with thousands of tiff frames, I think it tries to load everything to the memory, so the interface got stucked and crash. That maybe not a problem for Photopea and it may out of the scope of Photopea itself, but my question, would it possible for Photopea to mantain a "virtual file" which stays in the disk and only access it on demand?

BTW, Thanks for nice work, I like PhotoPea a lot.

For some LZW compressed images, it fails at:

var nit = tab[OldCode].slice(0); nit.push(tab[Code][0]);
var OutString = tab[OldCode].slice(0); OutString.push(OutString[0]);

because tab[OldCode] is null.

Changing those lines to following fixes the issue:

var nit = tab[OldCode] ? tab[OldCode].slice(0) : []; nit.push(tab[Code][0]);
var OutString = tab[OldCode] ? tab[OldCode].slice(0) : []; OutString.push(OutString[0]);

Can you please merge this fix?

Is it possible to split a multi-page tiff into multiple images? Either single-page tiffs or png/jpg, with png or jpg being preferred. I see that decode returns an array of IFDs, but what can I do with that? Can each one be saved to a file as it's own tiff file, or do I need to call something else to make it an actual tiff file. Or if it can be converted to png or jpg how is that done?

If I load a 16 bit tif file from Adobe Lightroom with or without compression into Photopea I end up with a corrupted output image.

Here is the same image as a 8 bit tif:

I don't see any errors in the Chrome debugger when opening the 16 bit tif. Let me know if there is anything else I can do to help debug this. Currently I am trying to find a solution to import and export 16 bit tif files for processing in javascript. If I can find a pure JS solution that would be ideal.

I don't think this would be specific to Node.js but I don't know for sure.

But I am getting the following when using the latest UTIF master code, when I try to view a tiff document that uses new style Jpegdecoder.

The following code is in method UTIF.decode._decodeNewJPEG = function(img, data, off, len, tgt, toff)

parser = new UTIF.JpegDecoder();

returns

g {M: null, B: -1}
   B: -1
   M: null

then

parser.parse("buff")

returns

g {message: "JPEG error: SOI not found"}

Thanks for the great library!

I'm trying to use this with React, and used the code for UTIF. replaceIMG() to get me started.

I'm using your sample image from https://www.photopea.com/api/img/G4.TIF which is quite large

I've setup a sanbox with a 600x600 canvas and I'm trying to scale that image to fit in with everything visible, but cannot seem to get context.scale(x,y) to work.

Are you able to offer any advice on how to scale the image? I see photopea handles it way, so figured I'm just doing something wrong.

I have some images produced from a software called ImageJ, when I try to load it in photopea, the loading get stucked.
This is the error:

Here is my file: https://www.dropbox.com/s/7vtuifu67bswlp7/microtubules-raw-500frames.tif?dl=0
(16-bits grayscale, 500 frames, 128x128 pixels)

If you're dealing with TIFFs that must be scaled down to fit their allotted areas, an Image will scale more attractively than a Canvas. To use an image, replace lines 1079-81 of UTIF.js

  var attr = ["style","class","id"];
  for(var i=0; i<attr.length; i++) cnv.setAttribute(attr[i], img.getAttribute(attr[i]));
  img.parentNode.replaceChild(cnv,img);

with the single line

  img.src = cnv.toDataURL('image/png');

The attached images show screen captures from a portion of a Group IV 300dpi Letter sized image when reduced to approximately one third its normal style. The left hand side shows the Canvas scaled; the right hand side shows the Image scaled.

I have a scanning device (hardware) which gives TIFF base64 strings as output, and I'm trying to show these strings in the browser. I'm getting an error, though:

JPEGInterchangeFormat does not point to SOI
JPEGInterchangeFormatLength field value is invalid

If I (outside of JS) decode the data and write to a file on a server, I can use the UTIF.replaceIMG function just fine. I can also open this saved file on Photopea, and it looks fine.

The process I'm trying is:

function _base64ToArrayBuffer(base64) {                                                                                                                                                                                                                                                    
    var binary_string =  window.atob(base64);                                                                                                                                                                                                                                              
    var len = binary_string.length;                                                                                                                                                                                                                                                        
    var bytes = new Uint8Array( len );                                                                                                                                                                                                                                                     
    for (var i = 0; i < len; i++)        {                                                                                                                                                                                                                                                 
        bytes[i] = binary_string.charCodeAt(i);                                                                                                                                                                                                                                            
    }                                                                                                                                                                                                                                                                                      
    return bytes.buffer;                                                                                                                                                                                                                                                                   
}                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                           
function tiffToPng(tiffBase64) {                                                                                                                                                                                                                                                           
  const arrayBuff = _base64ToArrayBuffer(tiffBase64);                                                                                                                                                                                                                                      
  const ifds = UTIF.decode(arrayBuff);                                                                                                                                                                                                                                                     
  console.log(ifds);                                                                                                                                                                                                                                                                       
  UTIF.decodeImage(tiffBase64, ifds[0])                                                                                                                                                                                                                                                    
  //var rgba  = UTIF.toRGBA8(ifds[0]);  // Uint8Array with RGBA pixels                                                                                                                                                                                                                     
  //console.log(ifds[0].width, ifds[0].height, ifds[0]);                                                                                                                                                                                                                                   
}  

And the ifds element does have a length/width:

I've attached an example of base64 data, as text:
tiff_base64.txt

Hello, I have used the library before, there is the problem that when I process a tif with multiple pages for conversion to png, it saves all the pages in the same image.
Original:

PNG file:

And my code is:
imagen_c is a base 64 tif
function(imagen_c){
var ifds = UTIF.decode(_base64ToArrayBuffer(imagen_c));
var decoded = UTIF.decodeImage(_base64ToArrayBuffer(imagen_c), ifds[0])
console.log(ifds)
var rgba = UTIF.toRGBA8(ifds[0]);
var width = ifds[0].width;
var height = ifds[0].height;
var data = ifds[0].data;
const png = new PNG({ width, height });
png.data = data;
var image_converted = PNG.sync.write(png);
return image_converted.toString('base64');
}

function _base64ToArrayBuffer(base64) {
var binary_string = atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}

Hi there,
I have an uncompressed single-band float32 tiff that (apparently) lacks the tag 259 (compression tag). Reading the spec, this tag seems mandatory so I don't know why ImageJ does not write it. Anyway, I tried to fix it by adding a default value in UTIF.js. In the function UTIF.decode, replacing that:

var cmpr = img["t259"][0];  delete img["t259"];

by that:

var cmpr = 1;
if( "t259" in img ){
	cmpr = img["t259"][0];  delete img["t259"];
}

Though, the problem seems to be rather that UTIF does not play well with 32bits images. Do you have any plans to improve this point?

Jo.

Tried .cr2 file with UTIF and it doesn't work so tried it on Photopea and just get loading.
Tried a LR generated dng on UTIF and it didn't work but works OK on Photopea so will try UTIF again for the dng - should it work using the UTIF.replaceIMG() method?

Not sure if the cr2 problem is a major tweak but I think the Maker Notes are the main difference from a normal tiff (tiff is Little Endian (II)).
.cr2 attached -
IMG_0290.CR2.zip

Following TIFFs with Type7 compression have incorrect colors. The PhotometricInterpretation is 2 (RGB), however, colors seem to be more like Lab*.

tiff.zip

Support for multi-page tif? Maybe I missed it.

Hi,
I just submitted a pull request and noticed that UTIF is written in plain old ES5.
Moving it to ES6 (and following) would make it more compact, readable, "splittable" (one could import just the module parts he needs) and, when no transpiling will be needed, more performant.
I could give my support on the transition :)

It would be really nice and understandable to have type definitions for IFDs.

I am sorry to say I found another image that won't display correctly. It doesn't lock the page, but it only display maybe a 1/100 of the image.

I will zip it and attach it. Otherwise it works great! Getting much further than I did with tiff.js in IE. Not getting any memory issues. Running in a loop it doesn't seem to process the entire 81 page tiff. ALways stops in the 70's mark. I am working on that one. The
D8HW001.tif.zip
file is attached in a zip.

Take the line:

var bytes = new Uint8Array((img.width*img.height*bipp) >> 3);

For a very large image, this will cause a RangeError.

Take for example a 16535 x 9652 with bipp = 24, the result should be 478787460, but instead in javascript we get -58083452

By changing all instances of >>3 to /8 and all instances of <<3 to *8 we can open much larger files than previously.

So, the previous example would look something like this:

var bytes = new Uint8Array((img.width*img.height*bipp)/8);

However, when there are a weird number of bits per pixel, these numbers aren't necessarily integers, so I guess we'd need to do some floor/ceiling on the numbers?

Anyway, this solved an issue I had opening huge TIFF files using this library - was wondering if anyone had any thoughts?

To expand, javascript binary operations are 32 bits max:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators

So any file with > 2^31 pixels will automatically not be openable, just because of these bitshifts.

Hi,

How would I go about getting the large preview JPEG from a Raw Photo? The readme suggests that that is a built in ability of UTIF but I cannot figure out how to do it?

I can see the start address and length of the preview in the exported data, but when I grab it directly and write it out is seems to be invalid (so there is definitely something here I don't understand :D.

Thank you for creating this lib, it is awesome and very much appreciated.

I get some error messages:

C:\>npm install -g utif
npm ERR! code ENOGIT
npm ERR! Error while executing:
npm ERR! undefined ls-remote -h -t ssh://[email protected]/makr28/jpgjs.git
npm ERR!
npm ERR! undefined
npm ERR! No git binary found in $PATH
npm ERR!
npm ERR! Failed using git.
npm ERR! Please check if you have git installed and in your PATH.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sean\AppData\Roaming\npm-cache\_logs\2018-08-04T09_18_23_181Z-debug.log

C:\>

install log file:
2018-08-04T09_18_23_181Z-debug.log

Just trying UTIF.js in desktop mode and it works well with Little-Endian TIFF's (II) but not so well if the TIFF is Big-Endian (MM) - the Big Endian ones also fail using Photopea online.

In desktop mode I am using the UTIF.replaceIMG() method which works well.

I have attached a zip file with the test files - the two 8 bit files were used as the source in LR for the 16bit LR pano and also for a 16bit pano produced with Panorama Stitcher (panoramastitcher.com). PS as far as I can tell always outputs a Big-Endian 16bit file (with alpha channel). The workround for me at the moment is to re-process the Big-Endian file into a little-Endian one like LR using ImageMagick but I thought that UTIF.js had the ability to do such conversions.

Note: NPM version of UTIF.js) needs updating for the latest LR fix (#46) - I had to use the master zip from GitHub.

Bad render on Photopea (BE-16bit)

OK render on Photopea (LE-16bit)

Test files attached -
Panos.zip

Since the dependency troubles #39 have now been solved can we get a release?

Note: I have a fix for this issue and will get it in this week but wanted to log it.

What the image looks like with UTIF

How the image should look

Hi, can you please keep the version on NPM updated? It just requires bumping the version in package.json, in accordance with semver, and doing npm publish.

Also, you can specify dependencies (such as pako) in package.json.

多页tif只显示第一页
UTIF._imgLoaded = function(e){
嵌套for循环 i 名重复导致，重新修改嵌套for循环 i 改为 l
}

I have a node project and I did an "npm install utif". This correctly brought in pako and jpgjs as well.
Pako can be found and is fine. But jpgjs module.exports is not being set.

In jpgjs line 102
if (typeof exports === "function") {
module.exports = {
JpegImage: JpegImage,
JpegDecoder: JpegDecoder,
JpxDecoder: JpxDecoder,
Jbig2Decoder: Jbig2Decoder
};
}

Looking in the debugger typeof exports evaluates to 'object'

This may be an issue with Jpg.js but I wanted to ask if you had come across this issue?

Thanks

added notes:
-Using npm version 8.9.4
-I am going thru the require('jpgjs') code path to load jpegDecoder

Any thoughts on how I could make this into a web worker? I have everything but that part working. With large documents, it would be great to have the multithreading.

Would it be possible to support TIFF files with old-style JPEG compression used within?

For example, the image named b05937c07e0f3ce1bfd2c8c71b0220ec.tif in the archive here: https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/imagetestsuite/imagetestsuite-tiff-1.00-part3.tar.gz

(Taken from imagetestsuite)

`const fs = require('fs');
const UTIF = require('utif');
const UPNG = require('upng-js');
var buffer = fs.readFileSync('./test.dng');

//let tiffFile1 = UTIF.decodeImage(buffer, UTIF.decode(buffer));
imgLoaded(buffer);

function imgLoaded(e) {
var ifds = UTIF.decode(e);
UTIF.decodeImage(e, ifds[0])
var rgba = UTIF.toRGBA8(ifds[0]); // Uint8Array with RGBA pixels
var png = UPNG.encode([rgba.buffer], ifds[0].width, ifds[0].height, 0);
//var tif = UTIF.encode([rgba.buffer], ifds[0].width, ifds[0].height, "");

all = fs.createWriteStream("out." + "png");

var buffer = new Buffer(png);
all.write(buffer);

all.end();


//fs.writeFileSync('test.png', png);

}`

this only exports the preview? file of the dng; its is pretty small compared to the original; i tried to open it in photopea and it just worked fine; i could zoom all the way in etc; i downloaded it from photopea and it was the original size; how am i getting this to work with UTIF; or how do you do it on photopea;

Hello, would it be possible to show a working example of this? Does it work on MultiPage tiff images too?

Before processing:
original.tif.zip

After toRGB8:

It looks like it some scaling might be off? The white channel looks like it's getting clipped in all except the darkest locations.

Hello,

I've been using Jimp (https://www.npmjs.com/package/jimp) within an AWS Lambda function to do some image processing. Recently we encountered a strange error where the Lambda fails with the following error message:

LosslessJpegDecoder is not defined

LosslessJpegDecoder was not something I'd seen before, so I did some investigating and found that it occurs in UTIF.js (line 243 in v2.0.1, the version my project is using). There's a comment that says the LosslessJpegDecoder is relevant to DNG files and isn't available in UTIF.JpegDecoder -- it makes sense that I would encounter this because my Lambda is usually working with DNG files.

Here's the line where a LosslessJpegDecoder gets created:

if(img["t262"]==32803) // lossless JPEG (used in DNG files) is not available in JpegDecoder.
	{
		var bps = img["t258"][0], dcdr = new LosslessJpegDecoder();

The string LosslessJpegDecoder does not appear anywhere else in UTIF.js. Where is it supposed to come from? It is not being imported or required anywhere.

Strangely, Jimp also uses an identical snippet of code, and also doesn't define, import, or require LosslessJpegDecoder. I'm not sure which of these packages is actually throwing the error but it's clearly related to the same cause.

Is this a bug? If not, where is LosslessJpegDecoder supposed to be defined?

Thank you,
c-anna

Hi,

I want to display tiff images contained in local html file in a web browser. Please guide me about the following:

1. • How can I use your utility to show tiff images contained in html file?
2. • On which browser will it work such as chrome, firefox, ie etc
3. • Will it work on ubuntu platform?

I am attaching code which I tried to display a simple tiff image in html file. Please let me know about it.
UTiff.zip

Any chance this library will ever add this capability? Some academic journals still require TIFFs, so they do get used.

I test some tiff files with your code, such as:

To

help me ! thank you.

PS:
in https://www.photopea.com/

it is this