jimp-dev / jimp

An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
http://jimp-dev.github.io/jimp/
MIT License
13.93k stars 762 forks source link

How to convert image using JIMP to black and white image #212

Closed slidenerd closed 7 years ago

slidenerd commented 7 years ago

First of all, thank you for the fantastic efforts in building this library. How can I convert an image using JIMP to black and white, I am not talking about grayscale but about binary image.

strandedcity commented 7 years ago

I believe it would work if you did .grayscale() and then .contrast(1)

http://codepen.io/strandedcity/pen/QdEYYX?editors=1000#0

.posterize(2) also works, but since there are currently no controls for the threshold, you'd frequently end up with an all-black or all-white image. By using contrast instead, your threshold ends up right in the middle.

strandedcity commented 7 years ago

Closing issue, please comment if that's not working for you.

GigaJunky commented 6 years ago

Better late than never, I found this little gem.. Maybe should be included in Jimp, but easy to add. https://www.npmjs.com/package/floyd-steinberg

var Jimp = require("jimp") ,floydSteinberg = require('floyd-steinberg') , filename = process.argv[2]

Jimp.read(filename, function (err, image) { if (err) throw err; image.autocrop().scaleToFit(256, 256) //.rgba(false).greyscale().contrast(1).posterize(2) image.bitmap = floydSteinberg(image.bitmap) image.write("out.png") })

dovk commented 5 years ago

I use the output as input to Tesseract-OCR. I found .rgba(false) together with .greyscale() gave better OCR results, and results were better with without .contrast()

bennyli519 commented 1 year ago

I believe it would work if you did .grayscale() and then .contrast(1)

http://codepen.io/strandedcity/pen/QdEYYX?editors=1000#0

.posterize(2) also works, but since there are currently no controls for the threshold, you'd frequently end up with an all-black or all-white image. By using contrast instead, your threshold ends up right in the middle.

I found out the latest version 0.22.8 doesn't work in this way but 0.2.27 worked. Do u know how to do it in the latest version? thanks~

BothaGideon commented 12 months ago

Better late than never, I found this little gem.. Maybe should be included in Jimp, but easy to add. https://www.npmjs.com/package/floyd-steinberg

var Jimp = require("jimp") ,floydSteinberg = require('floyd-steinberg') , filename = process.argv[2]

Jimp.read(filename, function (err, image) { if (err) throw err; image.autocrop().scaleToFit(256, 256) //.rgba(false).greyscale().contrast(1).posterize(2) image.bitmap = floydSteinberg(image.bitmap) image.write("out.png") })

I'm trying to use this in a TS file (Angular project)

  Jimp.read('assets/videos/test2.jpeg')
        .then((image) => {
            image.autocrop().scaleToFit(256, 256);
            image.bitmap = FloydSteinberg(image.bitmap);
        })
        .catch((err) => {
            console.log(err);
        });

But getting this error: Screenshot 2023-10-03 at 11 06 34

Any suggestions?

bennyli519 commented 12 months ago

Better late than never, I found this little gem.. Maybe should be included in Jimp, but easy to add. https://www.npmjs.com/package/floyd-steinberg var Jimp = require("jimp") ,floydSteinberg = require('floyd-steinberg') , filename = process.argv[2] Jimp.read(filename, function (err, image) { if (err) throw err; image.autocrop().scaleToFit(256, 256) //.rgba(false).greyscale().contrast(1).posterize(2) image.bitmap = floydSteinberg(image.bitmap) image.write("out.png") })

I'm trying to use this in a TS file (Angular project)

  Jimp.read('assets/videos/test2.jpeg')
        .then((image) => {
            image.autocrop().scaleToFit(256, 256);
            image.bitmap = FloydSteinberg(image.bitmap);
        })
        .catch((err) => {
            console.log(err);
        });

But getting this error: Screenshot 2023-10-03 at 11 06 34

Any suggestions?

if you need to handle BlackAndWhite image in the web project, use canvas instead. ref:https://daily-dev-tips.com/posts/vanilla-javascript-canvas-images-to-black-and-white

GideonBotha commented 12 months ago

Better late than never, I found this little gem.. Maybe should be included in Jimp, but easy to add. https://www.npmjs.com/package/floyd-steinberg var Jimp = require("jimp") ,floydSteinberg = require('floyd-steinberg') , filename = process.argv[2] Jimp.read(filename, function (err, image) { if (err) throw err; image.autocrop().scaleToFit(256, 256) //.rgba(false).greyscale().contrast(1).posterize(2) image.bitmap = floydSteinberg(image.bitmap) image.write("out.png") })

I'm trying to use this in a TS file (Angular project)

  Jimp.read('assets/videos/test2.jpeg')
        .then((image) => {
            image.autocrop().scaleToFit(256, 256);
            image.bitmap = FloydSteinberg(image.bitmap);
        })
        .catch((err) => {
            console.log(err);
        });

But getting this error: Screenshot 2023-10-03 at 11 06 34 Any suggestions?

if you need to handle BlackAndWhite image in the web project, use canvas instead. ref:https://daily-dev-tips.com/posts/vanilla-javascript-canvas-images-to-black-and-white

@bennyli519 That example was not working exactly how I want it to. I'm trying to mask the image so that it can look like a scanned document (black and white) which is easy to read by an OCR

Example image: https://live.staticflickr.com/65535/53231708634_0dfa26d7d7_k.jpg