jimp-dev / jimp Goto Github PK
View Code? Open in Web Editor NEWAn image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
License: MIT License
An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
License: MIT License
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.
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.
Hello
is it possible to wait the end of my job to continue my script ?
there is a callback function ?
thanks a lot !
You can use file-type project to determine the mime type from image buffer.
https://github.com/sindresorhus/file-type/blob/master/index.js
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.
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);
});
@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.
Hey! Could you suggest how to implement horizontal/vertical image mirroring? Thanks!
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
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
});
});
Hi
Is there a way to know the image size in entry?
I need it to do a resize without scale lose.
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
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
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? :-)
I would love to have .cover and .contain features like lwip has which mimic the CSS cover and contain image size settings
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?
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
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
I need to be able to merge more than one image together using web workers. How can I do that with your lib.
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.
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 change Hue, Saturation, Lightness with jimp?
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
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...
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?
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
I just used your library, it works very well, it's super simple and solves a good problem. Thank you!
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.
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")
});
i tested jimp on hundreds of images. and im keep getting out of memory.
any chances that there is a problem?
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?
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... :-).
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 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?
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.
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
Hello,
Could you provide some comparison / benchmarks with other tools like GraphicsMagick?
Best regards,
Mathieu
Could you please add a Jimp constructor with image buffer and not only path.
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'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]);
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...
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,
Please delete. I thought this was a browser library.... It's way too late to submit github issues folks!
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.
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.
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
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.
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)
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.