AuthorTopic: Chrome now supports pixel zoom! (Read 18203 times)

Gil · **on:** July 16, 2014, 09:13:13 am

If you update Chrome to 41, you'll have pixel-perfect zoom! THE FUTURE IS HERE.

Outdated Haxx:

This doesn't work anymore in the latest versions of Chrome! But don't worry, proper support for non-blurry zoom is already in the latest Chrome (Canary 41)

I made this TamperMonkey script for Chrome to disable the blurry zoom, based on the excellent work over at PixelJoint:
https://openuserjs.org/scripts/meskens.simongmail.com/Crisp_Pixel_Zoom

You can install TamperMonkey here:
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

I was pretty tired of people claiming you can't make a zoomer for Pixelation due to cross-origin policies, when there's several ways to get around that, a TamperMonkey script being one, using the createPattern hack being another.

Have fun with it! Should work for recent Chrome and probably Opera (I didn't test Opera, as I don't like it).

Crow · **Reply #1 on:** July 16, 2014, 10:19:31 am

Hm, that's interesting. I couldn't get anything to work without running into cross origin trouble, so I'll be looking into that.

Gil · **Reply #2 on:** July 16, 2014, 03:41:34 pm

I just updated to version 2.0. The code is way cleaner and better, for those looking into that. I just need to redo the hack for fixing large GIFs, so if you see a large GIF that doesn't work, tell me.

Also, I'd be interested to know if this works at all for you. If it doesn't, mention OS/Browser please

Here's what Rikfuzz found out so far:

Quote from: rikfuzz on July 16, 2014, 03:28:35 pm

iOS7:
Chrome - (both good)
Safari - (both good)

Android:
Chrome - (image blurry)
Firefox - (canvas is crisp but no animation)

OSX:
Chrome - (image blurry)
Safari - (both good)
Opera - (canvas is broken https://dl.dropboxusercontent.com/u/1534394/osx_opera.jpg)
Firefox current - (canvas is crisp but no animation, no errors in console)
Firefox old (3.6) - (don't think canvas is available, didn't think it was worth looking into. Shows unzoomed image)

Windows 7:
IE10 - (canvas blurry and not animated)
Chrome - (image blurry)

XP (lol):
IE8 - (JSfiddle doesn't actually manage to initialise, haha, but IE8 was pre-antialiasing and pre-canvas so... assumption).

Crow · **Reply #3 on:** July 16, 2014, 04:06:07 pm

For the record, keep in mind this is still a workaround. Tests done on non-Webkit browsers are not exactly necessary.

PixelPiledriver · **Reply #4 on:** July 16, 2014, 06:49:37 pm

Cool.

Windows 8: Chrome --> works

Mathias · **Reply #5 on:** July 16, 2014, 07:59:45 pm

I'm on Windows 7, Chrome. It's working! Images zoom with nearest neighbor. Thank you!!

Crow · **Reply #6 on:** July 16, 2014, 08:22:13 pm

Stuck.

Batzy · **Reply #7 on:** July 16, 2014, 08:33:23 pm

win8.1 chrome works like a charm <3 thank you so much Gil

Mr. Fahrenheit · **Reply #8 on:** July 16, 2014, 11:16:18 pm

Thank you!

I've waited so long.

Actually, on some pages, such as the daily challenge thread pictures near the bottom of the page didn't load when I had this script on. When I turned the script off it loaded just fine. Is this happening for anyone else?

Gil · **Reply #9 on:** July 17, 2014, 06:01:48 am

Quote from: Mr. Fahrenheit on July 16, 2014, 11:16:18 pm

Thank you! I've waited so long.

Actually, on some pages, such as the daily challenge thread pictures near the bottom of the page didn't load when I had this script on. When I turned the script off it loaded just fine. Is this happening for anyone else?

Yep, I ran into that one too. I haven't figured out yet why it's happening, but yes, your best bet is to turn it off for a sec :/

In time I'll try to iron out the kinks. Do note that you can right click an image -> open in new tab and it will act like Pixelation where you can click to zoom. So if you had to turn off the script, you can still look at images that way.

Good to know that most forms of Windows/Chrome work. That's the most important one I want to support.

Edit: actually, I figured out some tricks I can do to optimize. The next version will have these and I'm assuming it'll fix that elusive bug where the images stop rendering halfway down a thread.

Helm · **Reply #10 on:** July 17, 2014, 07:25:00 pm

Works. You're a rockstar.

Gil · **Reply #11 on:** July 17, 2014, 09:53:47 pm

Quote from: Helm on July 17, 2014, 07:25:00 pm

Works. You're a rockstar.

Heh, I've been trying to get this to work for a while now, because I knew it would be possible. I've been working on similar stuff for a while now and I suddenly gained the knowledge to tackle this

The only issue is that animation support is basically a hack. I will try to find a solution though and hopefully donate all the resulting code for Pixelation's use.

Mathias · **Reply #12 on:** July 17, 2014, 10:06:14 pm

Quote from: Gil on July 17, 2014, 06:01:48 am

. . .
The next version will have these and I'm assuming it'll fix that elusive bug where the images stop rendering halfway down a thread.

Yep, this is a problem. My workaround is hitting a "Quote" link on a post on the page and then using the browser's Back button. Shouldn't make a difference, but it does - all images show up.

Gil · **Reply #13 on:** July 18, 2014, 12:37:11 am

Quote from: Mathias on July 17, 2014, 10:06:14 pm

Yep, this is a problem. My workaround is hitting a "Quote" link on a post on the page and then using the browser's Back button. Shouldn't make a difference, but it does - all images show up.

The sporadity of the bug and the fact that it shows up more or less for certain users, combined with how it shows up, leads me to believe that it's a bug in the browser's rendering, possibly caused by either too many zoomable images or by setting up too many render loops.

Next version will contain a fix for both issues. I will only make an image zoomable once you try to zoom in on it and I'll make one render loop that renders all images.

Version 2.1 is up. Apparently something went wrong with the last version, as I can tell not a lot installed it. I changed the link above to properly represent the new url, which should fix this issue. From now on, if set in the options, this should auto-update.

Changes include a fix to the bug where images stop rendering. Please tell me if everything works.

Crow · **Reply #14 on:** July 18, 2014, 02:25:07 pm

Cookie'd. Pretty sure the others agree. No more double posts, though, please

Ambivorous · **Reply #15 on:** July 18, 2014, 06:13:07 pm

The good news is that it works (the images are now loading all the way through a thread), Gil. Nicely done and thanks because it really is awesome.

The bad news is that a friend just linked a 2818x4062 image to me and I clicked it once to make it native size, then once to make it small again, then again because I thought the click hadn't registered (where actually it was just slowly trying to render it) and then my PC crashed.
I'm thinking maybe you should set a max size, or switch off that feature if it's no longer needed (as I understand it, it's only there as a workaround for images not loading?).

I have a quad-core i5, a GTX 470, Windows 7 Pro SP1 and the latest Chrome, by the by.

Gil · **Reply #16 on:** July 19, 2014, 02:33:02 pm

Quote from: Ambivorous on July 18, 2014, 06:13:07 pm

The good news is that it works (the images are now loading all the way through a thread), Gil. Nicely done and thanks because it really is awesome.

The bad news is that a friend just linked a 2818x4062 image to me and I clicked it once to make it native size, then once to make it small again, then again because I thought the click hadn't registered (where actually it was just slowly trying to render it) and then my PC crashed.
I'm thinking maybe you should set a max size, or switch off that feature if it's no longer needed (as I understand it, it's only there as a workaround for images not loading?).

I have a quad-core i5, a GTX 470, Windows 7 Pro SP1 and the latest Chrome, by the by.

Ah yes, I'll have to remedy that happening. I'll set up a max size for the next version. For now, the easiest way is to turn the script off when looking at large images. It will only start to render when first clicked.

Mathias · **Reply #17 on:** July 19, 2014, 02:51:36 pm

You should put an image in the first post so people can easily and quickly do a test.

___

"Version 2.0 is here. Should have way better browser support. Now supports image tabs, PixelJoint gallery . . ."

??

Is this supposed to affect PixelJoint somehow?

Crow · **Reply #18 on:** July 19, 2014, 04:20:10 pm

Quote from: Gil on July 19, 2014, 02:33:02 pm

Quote from: Ambivorous on July 18, 2014, 06:13:07 pm
The good news is that it works (the images are now loading all the way through a thread), Gil. Nicely done and thanks because it really is awesome.

The bad news is that a friend just linked a 2818x4062 image to me and I clicked it once to make it native size, then once to make it small again, then again because I thought the click hadn't registered (where actually it was just slowly trying to render it) and then my PC crashed.
I'm thinking maybe you should set a max size, or switch off that feature if it's no longer needed (as I understand it, it's only there as a workaround for images not loading?).

I have a quad-core i5, a GTX 470, Windows 7 Pro SP1 and the latest Chrome, by the by.
Ah yes, I'll have to remedy that happening. I'll set up a max size for the next version. For now, the easiest way is to turn the script off when looking at large images. It will only start to render when first clicked.

Why does it even work on those images? Should restrict it to certain ones. On Pixelation, img elements with the zoom class will do.

tim · **Reply #19 on:** July 19, 2014, 09:05:10 pm

Yes the script is now loading on every page. It should be restricted to wayofthepixel.

Gil · **Reply #20 on:** July 20, 2014, 01:38:16 pm

Quote from: tim on July 19, 2014, 09:05:10 pm

Yes the script is now loading on every page. It should be restricted to wayofthepixel.

The current script is not specific to Wayofthepixel, it's an all-around script. Changing it to only work on Wayofthepixel is easy though. I'm just not sure if I can make options for this. I'll look into it.

Do note that it only works on specific images, so it doesn't actually do anything on most pages.

Right now, you will get zoom on the following pages:
- Pixelation
- Pixeljoint
- Any image opened by itself

I'll try to look for a solution for the next version coming out later today hopefully.

EDIT: Released version 2.12:

This matches only Pixelation and Pixeljoint. I was having troubles with it running on every page. I want to have it work with images in new tabs, that'll probably be in the next version more or less, but I can't promise anything, as I can't match on mime type (which is dumb).

rikfuzz · **Reply #21 on:** October 10, 2014, 08:17:28 am

Doesn't seem to work with animated images anymore?

Gil · **Reply #22 on:** October 21, 2014, 08:08:09 am

I just noticed that. Very odd indeed. It probably means that the bug I abused to get animated images working is now fixed. This is bad news, there's no easy way to fix it :/

Decroded · **Reply #23 on:** November 27, 2014, 01:40:00 am

Thanks Gil

Any chance of android plugin?
Or anyone recommend a workaround for android?
Even if it involves saving the image and viewing in some app?

JackieTarr · **Reply #24 on:** November 27, 2014, 09:57:01 pm

Thank you! I'm brand new to this forum, and the blurry zoom was already getting frustrating.

hawken · **Reply #25 on:** February 02, 2015, 11:12:44 am

works (yay!)

but not for animated gif sadly.

Chrome / OSX Version 40.0.2214.94 (64-bit)

Crow · **Reply #26 on:** February 05, 2015, 09:11:19 am

(Kinda) on topic of this, I've done some adjustments to the current zoom script to allow zooming of images before all images on the page have been downloaded. This should allow you to use the zoom features even if there are some images on non-responsive/slow servers, but it may break zoom functionality if you click an image that hasn't finished loading yet (lazy implementation, sorry).

Ambivorous · **Reply #27 on:** March 12, 2015, 11:05:23 am

I don't know if this is a thing that happened a while ago and I haven't noticed, or if somehow Chrome is lying to me, but it seems like nearest-neighbour zooming works in Chrome now - even for animated gifs.

EDIT (specs):
Windows 7, Chrome Version 41.0.2272.89 m

surt · **Reply #28 on:** March 12, 2015, 12:22:01 pm

CSS's image-rendering: pixelated is supported in Chrome from 41.

Crow · **Reply #29 on:** March 13, 2015, 11:07:06 am

Quote from: surt on March 12, 2015, 12:22:01 pm

CSS's image-rendering: pixelated is supported in Chrome from 41.

Which I had already added to the stylesheet a while ago

wzl · **Reply #30 on:** March 13, 2015, 12:15:30 pm

Oh thanks for the hint with version 41. i was wondering why it was all blurry still. Seems updating helps

hawken · **Reply #31 on:** March 23, 2015, 01:45:32 am

seems like animated GIF is working now!

News / Activities

Featured

AuthorTopic: Chrome now supports pixel zoom! (Read 18203 times)