Preventing blurry images in chrome?

[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.