Pixeljoint's zoom.js for Chrome and new Opera
Printed From: Pixel Joint
Category: The Lounge
Forum Name: Diversions
Forum Discription: Get to know your fellow pixel freaks. Chat about anything to do with video games, comic books, anime, movies, television, books, music, sports or any other off topic bs you can think of.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=18023
Printed Date: 06 September 2025 at 11:20am
Topic: Pixeljoint's zoom.js for Chrome and new Opera
Posted By: Yanrishatum
Subject: Pixeljoint's zoom.js for Chrome and new Opera
Date 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: https://codeo.me/4eR - Full commented version and https://codeo.me/4eS - 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 http://www.pixeljoint.com/pixelart/15820.htm - 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. https://codeo.me/4eR - Full commented version | https://codeo.me/4eS - 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. |
Replies:
Posted By: Hapiel
Date 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 ------------- |
Posted By: Altourus
Date Posted: 19 January 2014 at 2:36pm
| Worked for me too |
Posted By: Mr.Fahrenheit
Date Posted: 20 January 2014 at 7:26am
| Yeah this works great |
Posted By: jalonso
Date 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? ------------- |
Posted By: Yanrishatum
Date 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. |
Posted By: Hapiel
Date 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 ------------- |
Posted By: Yanrishatum
Date 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 http://www.pixeljoint.com/forum/forum_posts.asp?TID=17344&KW= - 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. 
|
Posted By: Hapiel
Date 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! ------------- |
Posted By: Yanrishatum
Date 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.
https://codeo.me/4eR - Full commented version | https://codeo.me/4eS - 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) |
Posted By: Dyre
Date 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. |