Where i can find the actual Jimp-file for a worker? #1217

Spiri0 · 2023-03-16T04:44:53Z

Spiri0
Mar 16, 2023

I saw this example here on the site last year. I thought I'd try it again with the latest version of Jimp, because the old one unfortunately turned 16-bit image datas into 8-bit datas. I downloaded topology files from NASA. These have the hgt format and for this I wrote a small decoder in python and it then turns them into 16-bit grayscale images. In gimp I then see that the image file also has 16 bits and if I use fast-png then it also reads the 16 bit pixel data correctly. But I'm looking for a decoder that can also do this with jpg images, because png images are significantly larger and take longer to load because the alpha channel is also included, which I don't need at all. Where can I find the JIMP script to be integrated in webworker? I've searched the folder and can't find anything. Maybe I'm just being clumsy.
In my software I integrate everything via import because I bundle it with webpack. Then I want to use electron. That's why it's so important for me to have a 16-bit image decoder that doesn't have any node dependencies. With fast-png I have resolved all node dependencies so that it runs purely frontend. That was quite a hassle and I`m happy that it works, but it's still the png format and i urgently need the jpg format for better performance.
Where can I currently find the JIMP code to be integrated into the webworker?
Is there perhaps a new example if something has changed fundamentally?

The html-File:

<!DOCTYPE html>
<html>
    <head>
        <title>Jimp browser example 3</title>
    </head>
    <body>

        <h1> Demonstrates loading a local file using Jimp on a WebWorker thread </h1>
        <p><input type="file" onchange="newFiles(this);" /></p>  
        <script>
            
        function newFiles(element){
            for (var i=0; i<element.files.length; i++) {
                readFileAndProcess(element.files[i]);
            }

            function readFileAndProcess(readfile){
                var reader = new FileReader();
                reader.addEventListener("load", function(){
                    var worker = new Worker("jimp-worker.js");
                    worker.onmessage = function (e) {
                        var img = document.createElement("img");
                        img.setAttribute("src", e.data);
                        document.body.appendChild(img);
                    };
                    worker.postMessage(this.result);
                });
                reader.readAsArrayBuffer(readfile);
            }
        }

        </script>
        
    </body>
</html>

The worker-script:

importScripts('./jimp.min.js');  //where can i find this file or an equivalent jimp file that I can include with import?

self.addEventListener('message', e => {

  Jimp.read(e.data).then(lenna => {
    lenna
      .resize(256, Jimp.AUTO) // resize
      .quality(60) // set JPEG quality
      .greyscale() // set greyscale
      .getBase64(Jimp.AUTO, (err, src) => {
        if (err) throw err;
        self.postMessage(src);
        self.close();
      });
  });
});

I'm sorry that I can't actively support the further development, because my project is already taking up all of my free time.

Here is an example with fast-png in three.js but i would like to do it with jimp and 16 bit jpg files.

hipstersmoothie · 2024-09-02T22:53:17Z

hipstersmoothie
Sep 2, 2024
Maintainer

In the latest version you should just be Able to import "jimp"

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jimp

Where i can find the actual Jimp-file for a worker? #1217

{{title}}

Replies: 1 comment

{{title}}

Select a reply

jimp

Where i can find the actual Jimp-file for a worker? #1217

Spiri0 Mar 16, 2023

Replies: 1 comment

hipstersmoothie Sep 2, 2024 Maintainer

Spiri0
Mar 16, 2023

hipstersmoothie
Sep 2, 2024
Maintainer