Diversions
 Pixel Joint Forum : The Lounge : Diversions
Message Icon Topic: Pixeljoint's zoom.js for Chrome and new Opera Post Reply Post New Topic
Author Message
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Topic: Pixeljoint's zoom.js for Chrome and new Opera
    Posted: 17 January 2014 at 12:16am
Hi. As many of you know, Chrome and new Opera uses same engine - Chromium. And Chromium is such bad guy, who don't like pixelart and blurs images when zooms-in. And to look zoomed images on Pixeljoint, users of Chromium must open Firefox or save image to PC. And this is bad. So, I created an extended version of Pixeljoint's zoom.js. My version uses Canvas for upscaling images if script detects Chromium.
There is this script: Full commented version and minified version
Why I'm post it? I request you, guys, to test it. Because creator can't find all of the bugs and testing by other people are required.
Again: This script is for Chrome and new Opera users. On Firefox and old Opera this script works as default zoom.js
How to test it:
Open any pixeljoint page (like this), press Ctrl + Shift + J or F12 (for Chrome), paste code to console and press enter. Then just use the zoom buttons and enjoy not blurred image :)
And yes, it supposed to work even on forum. But only if installed to site (because initialization).
P.S. I sended this script to Jalonso, but I don't think, they'll add this script without full testing.
P.P.S. And sorry for my english.

UPD: Updated script (small fix of chunk calculation) and GIF Time!
Chromium before:

Chromium after:

UPD 2: Updated the script with much better gif render loop (no more setInterval) and fixed canvas positioning + some optimizations and refactoring.
Full commented version | minified version.

For those, who interested about "how" (Alert! Bad english below!):
Rendering of static images are very easy with canvas. After new year I discovered a webkit-specific Boolean in canvas context2D, which disables image smoothing for rendering (And I'm used bad words about Google after it , fun in that: This feature added 2.5 years ago). And only thing I need to do - create a canvas and render scaled image to it. But with GIF files all not so easy. Canvas have strange behaviour about it.
1. If Canvas size more than 65536 (Not exact value, but stable 256*256) pixels in total, context2D always renders first frame of gif file.
2. Rendering of current frame - Chromium-specific behaviour. I tested it in Firefox, and it renders only first frame in any case.
To avoid problem of 256*256+ image, I'm use different method for Gif rendering. I used 2 Canvas object. First is equals to size of 1 chunk (Not always 256*256. If image is 128x1024) and second is equals to actual scaled image size. First, gif renders to invisible canvas, and only then to visual canvas.
And in final, I'm not replacing image with canvas, but place canvas behind image and make image transparent. I did it for more invisibility of script and make Image context menu available.
Only one problem: I used Absolute position, which removes canvas from normal rendering-flow. And if scale more than site borders size, it not crops as Image, but renders above it, out of site bounds.

Edited by Yanrishatum - 22 March 2014 at 8:23am
IP IP Logged
Hapiel
Rear Admiral
Rear Admiral
Avatar

Joined: 09 October 2018
Online Status: Offline
Posts: 3076
Quote Hapiel Replybullet Posted: 18 January 2014 at 10:58am
It works! This is absolutely amazing! I only tested on chrome, but I can't wait until PJ implements this script!

:D
IP IP Logged
Altourus
Seaman
Seaman
Avatar

Joined: 31 January 2019
Online Status: Offline
Posts: 10
Quote Altourus Replybullet Posted: 19 January 2014 at 2:36pm
Worked for me too
IP IP Logged
Mr.Fahrenheit
Commander
Commander
Avatar

Joined: 01 April 2015
Online Status: Offline
Posts: 238
Quote Mr.Fahrenheit Replybullet Posted: 20 January 2014 at 7:26am
Yeah this works great
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 14 June 2016
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 20 January 2014 at 8:31am
Guys, I'm confused. This add-on is great and I installed for Chrome on any site at all and it even updates when Yarunhastum updates automatically.
Why would we add as a script to PJ and then have to update every time he does?
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 20 January 2014 at 8:45am
Originally posted by jalonso

Guys, I'm confused. This add-on is great and I installed for Chrome on any site at all and it even updates when Yarunhastum updates automatically.
Why would we add as a script to PJ and then have to update every time he does?

This is a little different from Pixezoom extension. This is an extension of PJ sciprt and called to improve user experience without any problems (like installing extension to see zoomed images at PJ on Chormium). And because this is an extension of inner-site script, it must be tested more than extension to exclude any bugs.
As alter, I can include script as wrapper to Pixezoom, but this is less user-friendly way.
IP IP Logged
Hapiel
Rear Admiral
Rear Admiral
Avatar

Joined: 09 October 2018
Online Status: Offline
Posts: 3076
Quote Hapiel Replybullet Posted: 22 January 2014 at 7:59am
Originally posted by jalonso

Guys, I'm confused. This add-on is great and I installed for Chrome on any site at all and it even updates when Yarunhastum updates automatically.
Why would we add as a script to PJ and then have to update every time he does?

I don't understand what you mean either.. Copying and pasting a script does not 'auto update'.. In fact I have to copy and paste now every time I want to use it. Obviously installing it on PJ would enable it for everyone, which would be great! Who would not want crisp pixels?
Yes, should the script contain errors it might need to be updated again, for this we test it now. Once it seems stable (which it seems to me!) it should not need any soon updating! Call sedge! :D
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 22 January 2014 at 8:42am
Originally posted by Hapiel

I don't understand what you mean either.. Copying and pasting a script does not 'auto update'.. In fact I have to copy and paste now every time I want to use it. Obviously installing it on PJ would enable it for everyone, which would be great! Who would not want crisp pixels?
Yes, should the script contain errors it might need to be updated again, for this we test it now. Once it seems stable (which it seems to me!) it should not need any soon updating! Call sedge! :D

He's talking about my other extension, which used to zoom images on any site. But this extension not updated to new method of scaling (because I'm so-o-o lazy :D), but uses very slow manual scaling.
UPD: Ok, because I'm run out of interesting games to play, extension now updated to new version too.

Edited by Yanrishatum - 22 January 2014 at 9:01pm
IP IP Logged
Hapiel
Rear Admiral
Rear Admiral
Avatar

Joined: 09 October 2018
Online Status: Offline
Posts: 3076
Quote Hapiel Replybullet Posted: 12 February 2014 at 4:00am
When can PJ install this?? When I visit PJ on computers not my own that don't have the extention installed, I still love seeing crispy pixels!
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 22 March 2014 at 8:25am
I'm updated the script with much better gif render loop (no more setInterval) and fixed canvas positioning + some optimizations and refactoring.
Full commented version | minified version.
Please, test it again. (Meh, I don't think anymore, that this script will be added, and updated it only because I have free time)
IP IP Logged
Dyre
Seaman
Seaman


Joined: 10 June 2014
Online Status: Offline
Posts: 1
Quote Dyre Replybullet Posted: 11 June 2014 at 9:53am
apparently imgToZoom is not defined? <--error I get on forums page, trying to click zoom on images after running this script. D:

seems to work fine in the gallery though.

Edited by Dyre - 11 June 2014 at 9:55am
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum