jimp-dev / jimp Goto Github PK

Could you please add a Jimp constructor with image buffer and not only path.

I've noticed that crop was quite slow. The problem is that you are creating and copying a new array on each pixel with .concat. Just use .push to avoid this behavior.

            bitmap.push(data[idx]);
            bitmap.push(data[idx+1]);
            bitmap.push(data[idx+2]);
            bitmap.push(data[idx+3]);

Is there a way to use stream?
I'm using jimp in a node-webkit app and each time i resize and crop a file the app freeze during the job. I wrapped everything in a promise but nothing seem to change, it's still synchrone and freeze my app.

Hello,

I'm wondering whether it's possible to create a circular image in JIMP i.e. creating a 200x200 transparent canvas and create a circle on top of it with a radius of 200px. The aim is to create Firefox OS favicons e.g.

Hi, First of all , i want to congratutions @oliver-moran for this awesome module.
This is stuning awesome. 👍

The bug. Png Alpha pixes are losing quality and saturation when the background is alpha.
But if the background is solid the alpha pixels are render 100% correct.

• In composite images*

Original

Write in Jimp

The yellow and green have 58% alpha... The stroke of this evil goblin have a bit glow alpha pixels.

Edit:
The problem happens when you make an image as new Jimp and use as composite.

Polyfilling globally has the (unintended?) consequence of overwriting the native Promise implementation if it exists in node (or other polyfills). When used as a library in a larger project, this seems undesirable. It probably doesn't cause many bugs (it caused one in a project I am working on), but it does cause confusion, and I'd suggest an explicit var Promise = require('es6-promise').Promise in any file that needs a Promise instead of the polyfill.

Further discussions here

I just used your library, it works very well, it's super simple and solves a good problem. Thank you!

i tested jimp on hundreds of images. and im keep getting out of memory.

any chances that there is a problem?

You can use file-type project to determine the mime type from image buffer.
https://github.com/sindresorhus/file-type/blob/master/index.js

Hi, jpeg-js is available as version 0.1.1 which fixes at least a annoying bug with jpeg files that store the quantization tables not before the actual frames.

Is there a chance that you update the package.json of jump to let it depend on the newer jpeg-js?

Thanks, Anton

Hi Oliver,

Thank you for your quick responses to all of my queries.

As, you suggested, I am now uploading the original images, without using HTML Canvas object on client.
I am looking for rotating the image and making the multiple sizes of the images, viz. large, medium, small.

I am loading the image on server using Jimp.read and then EXIF rotating the image. After that keeping the object, I am creating a clone of the image and then creating multiple sizes of images.

I want to know if my approach is right keeping in mind the minimal of bytes, best of image quality and server performance. Also, I want to know, what should be optimal quality setting I should use. Should it be fine at 60% or it requires 70%?

Thanks a lot for your help,
Manik Mittal

@oliver-moran

Have a look at:

https://github.com/leogiese/node-png

It's a fork of pngjs that is being updated...

In any case, you've done some excellent work here. Thank you.

Thank you for this library!
I've been looking for something dependency less and am now playing around with this.

    var file = "animated_gif.gif";
    var scale = 2;
    new Jimp(file, function (err, image) {
      this.scale(scale)
        .quality(quality) // set JPEG quality
        .write(filename + ".jpg");
    })
....

causes
....
/node_modules/jimp/resize.js:25
        throw (new Error("Invalid settings specified for the resizer."));
               ^
Error: Invalid settings specified for the resizer.
at Resize.initialize (/node_modules/jimp/resize.js:25:16)
at new Resize (/node_modules/jimp/resize.js:17:10)
at Jimp.resize (/node_modules/jimp/jimp.js:815:18)
at Jimp.scale (/node_modules/jimp/jimp.js:840:10)
at Jimp.<anonymous> (/node_modules/jay-npm/lib/jay.js:371:12)
at Jimp.throwError (/node_modules/jimp/jimp.js:40:44)
at Jimp.parseBitmap (/node_modules/jimp/jimp.js:190:24)
at /node_modules/jimp/jimp.js:139:25
at fs.js:266:14
at Object.oncomplete (fs.js:107:15)
....

I would love to have .cover and .contain features like lwip has which mimic the CSS cover and contain image size settings

RangeError: Maximum call stack size exceeded

C:\Users\Andre\MEGA\game\wizz\node_modules\gulp-image-scramble\node_modules\imag
e-scramble\node_modules\jimp\index.js:0
(function (exports, require, module, __filename, __dirname) { var FS = require
^
RangeError: Maximum call stack size exceeded
    at Jimp.<anonymous> (C:\Users\Andre\MEGA\game\wizz\node_modules\gulp-image-s
cramble\node_modules\image-scramble\node_modules\jimp\index.js)
    at Jimp.scan (C:\Users\Andre\MEGA\game\wizz\node_modules\gulp-image-scramble
\node_modules\image-scramble\node_modules\jimp\index.js:550:15)

In this line :550 we have this

Jimp.prototype.scan = function (x, y, w, h, f, cb) {
    if ("number" != typeof x || "number" != typeof y)
        return throwError.call(this, "x and y must be numbers", cb);
    if ("number" != typeof w || "number" != typeof h)
        return throwError.call(this, "w and h must be numbers", cb);
    if ("function" != typeof f)
        return throwError.call(this, "f must be a function", cb);

    // round input
    x = Math.round(x);
    y = Math.round(y);
    w = Math.round(w);
    h = Math.round(h);

    for (var _y = y; _y < (y + h); _y++) {
        for (var _x = x; _x < (x + w); _x++) {
            var idx = (this.bitmap.width * _y + _x) << 2;
            f.call(this, _x, _y, idx);  // <---------- line 550
        }
    }

    if (isNodePattern(cb)) return cb.call(this, null, this);
    else return this;
};

This happend when you scan a large image... in my case (1024x2048) size;

I'm trying to find a solution

Hello,
I try to use your ib with a large jpg file but the saved file is totally green (#008700) ...
do you have ane idea ?
thanks

Hello,

I'm having trouble creating a blank canvas with a background colour:

jimp = new Jimp('144', '144', 0xffdddddd, function (error, canvas) {
   console.log(error, canvas);
});

Problem is, I get this error:

/Users/haydenbleasel/Projects/favicons/node_modules/jimp/index.js:49
    else throw error;
         ^

Error: cb must be a function
    at Jimp.throwError (/Users/haydenbleasel/Projects/favicons/node_modules/jimp/index.js:47:43)
    at new Jimp (/Users/haydenbleasel/Projects/favicons/node_modules/jimp/index.js:91:31)
    at createImage (/Users/haydenbleasel/Projects/favicons/index.js:42:24)
    at /Users/haydenbleasel/Projects/favicons/index.js:61:21
    at Object.async.forEachOf.async.eachOf (/Users/haydenbleasel/Projects/favicons/node_modules/async/lib/async.js:233:13)
    at generateFavicons (/Users/haydenbleasel/Projects/favicons/index.js:55:19)
    at /Users/haydenbleasel/Projects/favicons/index.js:79:17
    at Object.async.forEachOf.async.eachOf (/Users/haydenbleasel/Projects/favicons/node_modules/async/lib/async.js:233:13)
    at module.exports (/Users/haydenbleasel/Projects/favicons/index.js:76:15)
    at Object.<anonymous> (/Users/haydenbleasel/Projects/favicons/test.js:3:1)

If I wanted an image to be a circle for instance I would do something like blit a png with a transparent middle and black outline, I would then blit a png or jpeg with a black middle and white outline using the OR Boolean operation.

Hi,
we are encountering occasional issues whereby the image is still being written while the callback has already fired. The problem is in the Jimp.prototype.write whereby the callback is returned within the "open" stream event. To fix the issue, update this section as follows:

    this.getBuffer(mime, function(err, buffer) {
        if (err) return throwError.call(that, err, cb);
        var stream = FS.createWriteStream(path);
        stream.on("open", function(fh) {
            stream.write(buffer);
            stream.end();
//            return cb.call(that, null, that);
        });

        stream.on("finish", function(fh) {
            return cb.call(that, null, that);
        });

    });

Many thanks!

Paul

Any idea what the performance of this would be or what would be your intended usage scenarios? Is this intended for production use or maybe just as a proof of concept project?

Thanks,

The two images blow give a zero distance...

Test code:

var Jimp = require('jimp');

var imageName1 = __dirname + '/' + 'img.jpg';
var imageName2 = __dirname + '/' + 'img2.jpg';

Jimp.read(imageName1, function(err, image1) {
  if (err) {
    return console.error(err);
  }
  Jimp.read(imageName2, function(err, image2) {
    if (err) {
      return console.error(err);
    }
    console.log('Distance betweer images is:', Jimp.distance(image1, image2));
  });
});

(their distance does not seem zero, to me... :-)

Do I miss something?

I really want to be able to do something like this:

npm i jimp -g

and then

jimp resize --crop image.jpg 420x130 600x240 1024x600

Is this something other people want?

I need to be able to merge more than one image together using web workers. How can I do that with your lib.

Hey! Could you suggest how to implement horizontal/vertical image mirroring? Thanks!

I've been trying to use jimp to create a grunt task to resize some images. I am using the following code:

  var done = grunt.task.current.async();

  /* jshint -W031 */
  new Jimp( fullResImageName, function() {
    this.resize( width, height ).write( destinationFile, done );
  } );

About half the time when I run a grunt task that calls this code, it works fine. The other half of the time, it just creates a file with the correct name, but of size 0 bytes.

Using OSX 10.10.1, node v0.10.30

Hi Oliver,

I am trying to EXIF rotate the image. I am using the following code:

var image = new Jimp(srcImgLocation, function (err, image) {
if (!!Orientation && Orientation != 1) {
switch (Orientation) {
    case 2:
        // horizontal flip
        image.flip(true,false).resize(Jimp.AUTO,height).write(destImgLocation,function(err,image){

        });
        break;
    case 3:
        // 180° rotate left 
        image.rotate(180,false).resize(Jimp.AUTO,height).write(destImgLocation,function(err,image){                               
        });
        break;
    case 4:
        // vertical flip
        image.flip(false, true).resize(Jimp.AUTO,height).write(destImgLocation,function(err,image){

        });
        break;
    case 5:
        // vertical flip + 90 rotate right
        image.flip(false,true).rotate(90,false).resize(Jimp.AUTO,height).write(destImgLocation,function(err,image){

        });

        break;
    case 6:
        // 90° rotate right
        image.rotate(90, false).resize(Jimp.AUTO, height).write(destImgLocation,function(err,image){

        });
        break;
    case 7:
        // horizontal flip + 90 rotate right
        image.flip(true,false).resize(Jimp.AUTO,height).rotate(90,false).write(destImgLocation,function(err,image){

        });
        break;
    case 8:
        // 90° rotate left
        image.rotate(270, false).resize(Jimp.AUTO, height).write(destImgLocation,function(err,image){

        });
        break;
}

The images are getting cut from top and bottom. Specifically for the images with Orientation 6 and 8. I am not able to set the axis, which I was able to do on the Client JS using HTML Canvas and Context objects. Can you please help?

First time using your library and I have to say it's great.

Now to the point: As it's possible to set the quality of a jpg file, it would be cool if it's also possible to set some options for pngs, in my case the deflateLevel and filterType options if node-png would be required. You think that this would be a good addition?

If yes: What would the functions that implement this look like? I might take a shot at implementing if you'd like.

Is there a way to change Hue, Saturation, Lightness with jimp?

When rotating an image where the width is considerably larger than the height over an arbitrary number of degrees, JIMP returns a largely empty rotated image where the new height and width are switched and the image looks correctly rotated. I already tried just switching h and w in the advancedRotate function, but then rotate seems to crop first after this do the rotate so you end up with a cropped result anyway.

var Jimp = require("jimp");

// open a file called "hb.png"
var hb = new Jimp("message.png", function (err) {
    if (err) throw err;

    this.clone().rotate(13).write("./output/msg-rotate-13.png")
});

Currently, changes applied to a jimp object are not revertable. If you want to extract multiple sections from an image or something alike, this might help:

Jimp.prototype.save = function (cb) {
    this.oldBitmap = {}
    this.oldBitmap.height = this.bitmap.height + 0;
    this.oldBitmap.width = this.bitmap.width + 0;
    this.oldBitmap.data = new Buffer(this.bitmap.data);

    if (isNodePattern(cb)) return cb.call(this, null, this);
    else return this;
};

Jimp.prototype.revert = function (cb) {
    console.log(this)
    this.bitmap = _.extend(this.oldBitmap, {});

    if (isNodePattern(cb)) return cb.call(this, null, this);
    else return this;
};

Of course one has to keep an eye on the memory...

Very first time using GitHub, so apologies if this suggestion is in the wrong place.
Is there, can there be, an option to keep perspective when re-sizing ?
e.g. instead of : this.resize(512, 512)
this.resize(512, auto) - resize width, keep height perspective
this.resize(auto, 512) - resize height, keep width perspective

Thanks

Is an auto-crop feature scheduled any point in time?

I mean: some images have one-color borders, which can be sometimes annoying, something that distracts from the real image contents...

I suppose it should not be so difficult, to implement (knowing the inners of jimp... :-): you should check the colors of the most external pixel for each one of the four borders: if they are all the same, you should crop that side by one pixel, and continue with the next pixel...

As an edge case, you could finish with an empty image (if the source image was just one color)... That should be fine, of course (auto-cropping one-color image is a quite silly operation in itself... :-).

For example, from:

to:

Instead of return "this" in each method, you should implement the Node.js callback pattern "function(err, result)"
In this case it will be easy to use promise and have async task.

ex:
var jimb = new Jimb(buffer, "image/png");
return Q.nfcall(jimb.resize, 200, 200).then(function(image){
return Q.nfcall(jimb.toBuffer, image, "image/png").then(function(buffer){
//And do what you want
});
});

    jimp.read(dir + images[i] , function(err , image){
        if(image.bitmap.width < 720 || image.bitmap.height < 960){
            throw "Source image too small";
        }
        if(image.bitmap.width / 720 > image.bitmap.height / 960){
            image = image.resize(jimp.AUTO , 960);
            image = image.crop((image.bitmap.width - 720 / 2) , 0 , 720 , 960);
        }else{
            image = image.resize(720 , jimp.AUTO);
            image = image.crop(0 , (image.bitmap.height - 960 / 2) , 720 , 960);
        }
        image.write(dir + "CR_" + images[i]);
    }); 

And output is 90 degrees rotated image.

Hi,

I am new to image optimization. I just want to optimize my images tomake them small in size and dimension, but maintaining quality. I used the following code:

new Jimp("img.jpg", function (err, image) {
        if(!err){
            var origImageDim = {width:this.bitmap.width,height:this.bitmap.height};
            var dimensions = calculateImageDimensions(origImageDim.width,origImageDim.height,600,400);//Get proportionate dimensions
            var imageClone = image.clone();
            image.cover(dimensions.width, dimensions.height).write("destFolder/img.jpg", function(err, image){
                    if(!err){
                        console.log("Image optimised successfully");
                    }
                    else{
                        console.log(err);
                    }
                }
            )
        }
    }

    function calculateImageDimensions(width,height,maxWidth,maxHeight){
    // calculate the width and height, constraining the proportions
    if (width > height) {
        if (width > maxWidth) {
            height = Math.round(height *= maxWidth / width);
            width = maxWidth;
        }
    }
    else {
        if (height > maxHeight) {
            width = Math.round(width *= maxHeight / height);
            height = maxHeight;
        }
    }
    return {width:width,height:height};
}

The problem i am facing is that the quality of the resultant image is getting bad and the size (KB's) is getting bigger. Can you please help? Am I doing anything wrong?

It's not an issue, just a note.

I'm testing hash() function.

I find signatures it generates are quite effective to calculate the distance among two images.

However I notice that the hashes (perceptual hashes) are not as 'sensible' as I'd expect to: sometimes
making a small change to an image does not change the hash (and then the distance) at all (0 bits changed), while sometimes a similar change makes a 2% difference...

I suppose this behaviour can be expected knowing the internals of perceptual hashes algorithm, but it's not always aligned with humanly preceived distance...

Please delete. I thought this was a browser library.... It's way too late to submit github issues folks!

tried playing around with jimp.

installed via npm install jimp@latest

tried following the advice on the github readme.

got jimp.read was undefined.

check package.config says verison 0.2.10

checked the npm package.config says same version as github @ 0.2.10

followed the documentation in the npm readme and everything worked fine.

https://www.npmjs.com/package/jimp seems to be behind.

this would involve asking the decoder libraries for this api, or using standalone libraries, such as exif-parser

I'm trying to follow your API docs and use Jimp.AUTO for the width, however, I'm getting this error:

Error: w and h must be numbers

I've tried the instance of the image.AUTO, tried 'Jimp.AUTO' as a string and Jimp.AUTO and none of them work. Any ideas?

Great package by the way. Thank you.

Hello
is it possible to wait the end of my job to continue my script ?
there is a callback function ?

thanks a lot !

Just a question: do you know of any module written using jimp to find the distance (hammering distance) among images?
I'm looking for a full-javascript solution to compare an image with a bunch of images...

Is there a way to write the file like this:
fs.outputFile(pathToFile, image.bitmat.data, callback);
At the moment the file is writen but not considered has an image.

@oliver-moran, it looks like the recent pull request (#11) fixed an issue I was having with images writing to disk properly (#13).

Would you be willing to publish a new version to npm so that I can npm install the working version. I would greatly appreciate it.

if a callback is not passed where expected, return a promise. this way both node-style callbacks and promises are supported.

edit: at least for the constructor

This lib looks pretty handy, although it would be nice if we could pipe the image transformations directly to the browser with streams.

Something like this.

app.get("/my-dynamic-image", function (req, res) {
    new Jimp("lenna.png", function (err, image) {
         this.resize(512, 512); // resize
         this.pipe(res); // Send off.
    });
});

However I think that the api would be more intuative without forcing a callback into the Jimp constructor, and also making new optional.

app.get("/my-dynamic-image", function (req, res) {
    Jimp("lenna.png")
         .resize(512, 512)
         .pipe(res);
});

Hello,

Could you provide some comparison / benchmarks with other tools like GraphicsMagick?

Best regards,

Mathieu

First bug... :-)

var Jimp = require('jimp');

var imageName = 'ts.jpg';

Jimp.read(imageName, function(err, image) {
  if (err) {
    return console.error('Jimp can\'t read image:', err);
  }
  var hash64 = image.hash(64);
  if (hash64.length !== 11) {
    return console.error('hash value ('+hash64+') length is', hash64.length, 'instead of 11!');
  }
  console.log('hash64:', hash64);
});

file "ts.jpg" is: https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Taylor_Swift_112_%2818119055110%29.jpg/250px-Taylor_Swift_112_%2818119055110%29.jpg

All other images I am testing all return a hash lenght of 11 (why 11? :-)

Hi

Is there a way to know the image size in entry?
I need it to do a resize without scale lose.