Color changes after resizing.

[dene-]

So I'm using this resize to upload images to my server, but after resizing, the colors change a bit, or maybe the brightness. For example, a full white image, after resizing, the white turns a bit dark (#fdfdfd). I really need that the output image is equal to the source image, but size.

Thanks anyway, this proect is old! But still useful, good work!

[puzrin]

If you need highest possible photographic quality, it's impossible with this library. Because canvas has no access to gamma correction info. That would require manual binary formats parse. So, gamma correction info is lost after processing. Also, imagemagic / graphicsmagic use LAB color space for conversion for better results.

I'm not sure what was could be reason of brightness decrease, but gamma looks the first candidate (i hope you did not enabled unsharp mask, because it's buggy)

[puzrin]

Also i'm not sure that lancsos filter should guarantee unchanged brightness. Do you have reasons to think so?

[dene-]

It probably was that. At the end I had to add some brightness by server side. But anyway, an awesome work were made by doing all of this. unsharp mask looked nice all the times, but to disable it, do I need to set the unsharp amount and threshold to 0 only?

[puzrin]

It's off by defauls.

[puzrin]

@dene-, is this ticket opened, because you know math, and sure that math is incorrect, or because it works not as you expected? If second - then it worth closing as "not related".

I can fix math if needed and bug is known, but i'm very far from photography. Also, as i said, this resizer is not ideal for all possible needs:

• it's perfect for normal photos (like zillions of kittens, users upload to sites)
• it's NOT ok for professional-grade photos.

PS. In any case, it's better than everything else you can find for browser at this moment :)

[dene-]

Yes, it can be closed. As I'm doing a web image resizer for Instagram, pictures had to be 640x640 and this resizer is the best thing for that job. Also problem appeared when I did that full size square thing, where the picture isn't cropped and it has a white background, it didn't came up white at all, ad you could see the square in Instagram instead of the "panoramic" picture. But as I said, I fixed this by giving it a bit more brightness and solved :)

Also most image resizers for Android are quite bad... this was the best option, yet harder! But yes, it's the best!

[puzrin]

Hm... as far as i see, filter does have brightness compensation https://github.com/nodeca/pica/blob/master/lib/pure/resize.js#L117 . So, in theory it should keep energy. Probably, problem is in result rounding later.

https://github.com/nodeca/pica/blob/master/lib/pure/resize.js#L204-L207 - try to replace here and below (in vertical convolver) clampTo8((x >> 14) to clampTo8((x + (1 << 13)) >> 14).

[dene-]

Better now! But still, pure white changes to this value now: http://i.gyazo.com/72e15f856b8340c4965a6ae709015596.png
But well, there's no difference with pure white. Anyway, trying different reduction filters, I noticed that they change in it's way the image brightness. But what can we do anyway, it's not an issue.
Another thing, is that when i were trying to implement pica, using the canvas resize, I couldn't get the image data of the second canvas which is the first one but resized, it gave me anything.

[puzrin]

But still, pure white changes to this value

Did you fixed floor in one convolver or both vertical and horisontal? There could be 2 errors - one on horizontal pass, and one more on vertical.

I couldn't get the image data of the second canvas which is the first one but resized, it gave me anything

Don't know. If it show image, it should give data back (except cors limitations, and iphone issues). That's better to ask at Stack Overflow.

[dene-]

Now that I changed it in both convolvers works fine! I'd consider add this fix to the repo :) thanks! At the end I could get it, in the resizeCanvas function return, I appended the canvas "to" url to an image in the html.

[puzrin]

I appended the canvas "to" url to an image in the html

https://github.com/blueimp/JavaScript-Canvas-to-Blob I guess, you need convert canvas to dataURI first. Also, it worth to hack exif info if you need proper orientation. It's a bit long to explain, but you can look this code https://github.com/nodeca/nodeca.users/blob/master/client/users/uploader/uploader.js#L59-L172 or search details in google.

[avalanche1]

@puzrin , I've just tested your solution - #FFFFFF converts to #FFFEFF. Close to ideal 😄
Should merge that fix into master.

[puzrin]

FFFEFF - that's strange. When colors processed independetly, with the same logic, result for each channel should be the same.

[puzrin]

I've queued this task, but not with top priority. Busy with main nodeca project. If anyone wish to make PR - tests needed:

• Array 100x100x4 -> 10x10x4 (should be enougth). No canvas needed, resizeBuffer should be simple & fast.
• Color 00..FF (for channel) - check full range for sure.

[puzrin]

@avalanche1 could you take a look at this test https://github.com/nodeca/pica/blob/master/test/brightness.js? I need a simple example, when such test breaks brightness. Current samples are not affected.

[avalanche1]

I'm afraid I can't help you here - I don't have exp with tests

[puzrin]

I need any simple example image, that will be broken after resize.

Tests emulates 100x100px (3colors + alpha) raw bitmap, resized to 10x10px. Colors were 000, 7F7F7F & FFFFFF. https://github.com/nodeca/pica/blob/master/test/brightness.js#L14-L21. I could not reproduce that bug. Probably sizes should be different or something else.

[avalanche1]

I've screen captured some white background, saved it to jpeg, checked with eyedropper that it was #FFFFFF and resized it wit Pica. Received #FFFEFF. That was my whole test.

[puzrin]

Could you give me that file? May be that depends on size. As i said, i can't reproduce with my samples.

[avalanche1]

sent to ur mail