Preventing blurry images in chrome?

[Seiseki]

So I've heard chrome doesn't scale the images here with nearest neighbor interpolation.
I saw there were a few extensions you could download to fix that.

https://chrome.google.com/webstore/search/nearest%20neighbor?hl=sv

And one of them said this

img {
    image-rendering: -webkit-optimize-contrast;
}

This should prevent images from becoming blurry when scaled, though it might not work in all versions of Chrome.

But apparently it still doesn't work in Chrome with the extensions, maybe there's another way of fixing it?

And are there any other browsers having the same problem? I remember having to change some settings in opera a while back.

[Crow]

Chrome/Safari are pretty much the only affected browsers here. I'm afraid Opera will have the same problem once they begin working on their Webkit forked Blink with Google soon. We'll see. Someone posted a rather complex solution with HTML5 and the canvas tag earlier, which I haven't gotten around to implementing yet. And I'd rather not, to be honest.

[Seiseki]

Guess I won't be updating opera then

[Crow]

Do it. It'll be good, except for maybe this little nitpick. Who knows, maybe they'll implement something. If not, I will.

[Azuyre]

Someone on PixelJoint made an extension for chrome that fixes the blurred zoom on their site, I talked to him about getting it to work for Pixelation too and he said it's most likely possible but that he didn't have the time to try it out himself. Here's a link to the extension. If you click file there's a download option, once you download it you can just check developer mode on the extension page and go to load unpacked extension.

Anyway, I could ask him for the source code for it if someone wants to try and get it working for Pixelation too, an extension for just these two sites probably isn't the best solution, but its better than nothing I guess.

I don't know a thing about making extensions by the way so it's possible the files you need to modify it are already there.

[Helm]

I'd really like that because I still use Chrome and have to download every piece of pixel art I see here to see it up close and crisp. Would help with my spontaneous critiques to be able to zoom in Chrome cleanly again.

[Crow]

I'd really like that because I still use Chrome and have to download every piece of pixel art I see here to see it up close and crisp. Would help with my spontaneous critiques to be able to zoom in Chrome cleanly again.

So far, Opera's developer preview (Opera 15, labeled Opera Next right now) doesn't support the nearest neighbor CSS fixes either. I wonder if they'll still add it. One has to consider that this is basically still in an early alpha stage, though. Regardless, I'll add a fix for this soon.

[YellowLime]

Since I've been reading "nearest neighbor" very frequently lately, I assume it's becoming an often-used term and propose we use "NN" from now on. Or "nene".

[Seiseki]

That sounds kinda confusing, at least nearest neighbor is google-able..

[Mathias]

I'd really like that because I still use Chrome and have to download every piece of pixel art I see here to see it up close and crisp. Would help with my spontaneous critiques to be able to zoom in Chrome cleanly again.

You're on a PC, I believe. Have you tried the Windows zoom tool? I have keystroke CTRL+SHIFT+ALT+Z set to initiate it. Not ideal, but it works.

I too prefer Chrome and really need a nearest neighbor fix! I just tried this. Doesn't work.

[Crow]

You're on a PC, I believe. Have you tried the Windows zoom tool? I have keystroke CTRL+SHIFT+ALT+Z set to initiate it. Not ideal, but it works.

Win-+ also does the trick

I too prefer Chrome and really need a nearest neighbor fix! I just tried this. Doesn't work.

Yeah, only adds the CSS attribute. Which doesn't work. It's in Pixelation's stylesheet as well.

[Mathias]

Win-+ also does the trick

Nice! Thanks.

[Crow]

Well, the general approach is now implemented, but not activated, because it will not work with images not hosted on this domain, as some methods of the canvas object do not work when the canvas is tainted (which it is when images from other sources are drawn in it). Meh. Oh, and it wouldn't work with animations. That also somewhat bothersome.

[rikfuzz]

Could probably replace the img with an SWF object when zoomed instead much easier, without the cross domain issues. Ofcourse, it wouldn't work on iphones and stuff, but maybe sniff first and fall back to the old method.

I could code this up if you want to try this approach (I also use chrome). 

Rik

[Crow]

No flash.

[tim]

Flash is clearly not the solution, as you can't save images, etc...
I think you should simply replace the image on click with an image upscaled dynamically in javascript.

[Crow]

Flash is clearly not the solution, as you can't save images, etc...
I think you should simply replace the image on click with an image upscaled dynamically in javascript.

That's basically what the canvas hack achieves. I think I'll work with some Ajax later to process the image on the server and send back a scaled version. Better than nothing.

[rikfuzz]

Flash is clearly not the solution, as you can't save images, etc...
I think you should simply replace the image on click with an image upscaled dynamically in javascript.

That's basically what the canvas hack achieves. I think I'll work with some Ajax later to process the image on the server and send back a scaled version. Better than nothing.

Flash was just an easy hack, of course yeah you can't save images as easily (though could just as easily write out a link along with the embed). Processing the images on the server seems ideal, especially if you can cache them, and if you only do it for affected browsers I doubt the data increase will be too bad.

[PypeBros]

Processing the images on the server seems ideal, especially if you can cache them, and if you only do it for affected browsers I doubt the data increase will be too bad.

I'm not sure there would be processing power for that on the server. But a blank canvas, a reference canvas loaded with the picture and a javascript loop that goes

Code: [Select]

pixel = src.getpixel(x,y);
dst.putpixel(x*2,y*2); dst.putpixel(x*2+1, y*2);
dst.putpixel(x*2,y*2+1); dst.putpixel(x*2+1, y*2+1);
should do the trick client-side.
Naturally, having a browser that can simply scale, I'd love if that function was linked on some special chrome-dedicated click combo and that the current one just survives.

It would also be nice to have the option to zoom-out pictures smaller than 1:1 Although it's not useful for pixel art, it happens now and then that people post non-pixel art as reference, illustration, etc. which may screw post readability.

[Crow]

The only way to read image data using JavaScript is a canvas. I'm out of clientside options here. JavaScript does not support any file processing, mostly for security reasons. I can't just process an image, not even if I'd write something that'd read a PNG file raw. My plan: Ajax call to the server which will send the image back as a data URI; a base64 encoded string which contains the images. Chances are you've seen that before. I can put that on the canvas, since it has no origin. I can even place it in HTML5's local storage so the server doesn't have to process the same images over and over again. I'd say that is the best solution for now.

[surt]

You can load the image data in an image element, draw the image to a canvas with the canvas drawImage method, then you have the image data in a fully manipulable form without any need for server-side.

I'd just grab the image data from the the standard forum image and swap the image element out for a canvas if the user-agent string matches chrome and whatever other browsers happen to be problematic.

This works fine for me, no need for any complex CORS stuff.

EDIT:
Nevermind, I think you're right. I'm not actual using the getImageData here.

[Crow]

As I said, the code is in place:
http://www.wayofthepixel.net/Themes/default/scripts/zoom.js

But not active due to it not working. CORS only works when supported by the server hosting the images. So, it'd work with one image out of about 1000 if we were lucky.

[PypeBros]

Hmm ... I see. It was pretty naïve from me to ignore those security restrictions (although I do not see who exactly they protect against what  ).

So not even storing in local would help, would it ?

[Ambivorous]

The only way to read image data using JavaScript is a canvas. I'm out of clientside options here. JavaScript does not support any file processing, mostly for security reasons. I can't just process an image, not even if I'd write something that'd read a PNG file raw. My plan: Ajax call to the server which will send the image back as a data URI; a base64 encoded string which contains the images. Chances are you've seen that before. I can put that on the canvas, since it has no origin. I can even place it in HTML5's local storage so the server doesn't have to process the same images over and over again. I'd say that is the best solution for now.

I thought your plan was to send the zoomableimage.php file the desired images URL along with a zoom multiplier via POST and then have it become the zoomed in image.
The .php file would obviously just read in the image, quadruple each pixel using no more than a for loop and display it.

That does have the downside of having the image with the .php extension instead of .png, .jpg, etc..
I wouldn't know how to do it myself, but I just figured PHP does have image manipulation capabilities. Not possible? If it is possible then it should then work for animated .gifs as well.

[Crow]

Hmm ... I see. It was pretty naïve from me to ignore those security restrictions (although I do not see who exactly they protect against what  ).

So not even storing in local would help, would it ?

I can't store it locally without getting the data URL first, which I can't when the canvas is tainted, so I'll have the server do that instead.

I thought your plan was to send the zoomableimage.php file the desired images URL along with a zoom multiplier via POST and then have it become the zoomed in image.
The .php file would obviously just read in the image, quadruple each pixel using no more than a for loop and display it.

That does have the downside of having the image with the .php extension instead of .png, .jpg, etc..
I wouldn't know how to do it myself, but I just figured PHP does have image manipulation capabilities. Not possible? If it is possible then it should then work for animated .gifs as well.

Generally speaking, the more of the processing is done on the user's computer, the better. There's of course the downside of GIFs not working in this case, but maybe that's excusable. We'll see