Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: Zoom on Chrome via Canvas, or Pixezoom Post Reply Post New Topic
Author Message
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Topic: Zoom on Chrome via Canvas, or Pixezoom
    Posted: 21 October 2013 at 12:32pm
Hi. I'm not pixealrtist, but I like pixelart. And I like to use Chrome. But Chrome doesn't like to zoom images without blurring. And guess what? I'm just fixed it by my hands.

I'm glad to introduce my small Chrome extension: Pixezoom (now with opera support!)
So, how it works? Very simple. Open the image in new tab, and click on right side of the image to zoom-in, and left size to zoom-out I'm used idea of controls from PJ, and Shift + Click will do zoom-out, and Alt + Click resets zoom.
As a bonus, you can inspect images directly in pages, by select "Explore Scaler" in context menu.

Also, checkout my Pixeljoint's zoom.js extension test-request!

Some (small) history: I got this problem a long time ago. Didn't found fast solution and forgot about it. But recently, in one russian community in Vkontakte, one guy asked about solution of this problem. Other people answered, that porblem haven't solution. I'm disagreed with them and written that extension.
Oh, and sorry for my English.

Image to fill some place, and make topic not so boring (text-only):


Arts, used in screenshots/ads of extension work:
Warhammer Rhino
Meet Uncle Woo, Elsa
The Earthkeeper
/STARLIT/
(And some other works, after 2.3.0 update, which bringed an Opera version of extension)
Thanks for reading, have a good day.

Edited by Yanrishatum - 23 January 2014 at 9:49am
IP IP Logged
shampoop
Commander
Commander
Avatar

Joined: 12 January 2015
Online Status: Offline
Posts: 202
Quote shampoop Replybullet Posted: 21 October 2013 at 1:51pm
I just confirmed that this works.  Nice job!  Maybe I will start using chrome again
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 12 January 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 21 October 2013 at 2:14pm
Great Job. Do you wish to submit as news yourself or should we do it? All should be aware of this.

Badge added to your profile :)

Edited by jalonso - 21 October 2013 at 2:23pm
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 21 October 2013 at 2:54pm
Originally posted by jalonso

Great Job. Do you wish to submit as news yourself or should we do it? All should be aware of this.

I think you (aww, I think English lacks of respectful "you" word...) can post it by yourself. I'm too new to Pixeljoint, for submitting news.

Originally posted by jalonso

Badge added to your profile :)

Wow, thanks. Didn't thinked about any rewards for my small job.

Fun fact: I loosed 5$ for creating that extension. Because Google takes that price for publishing in Chrome Web Store. I don't think it's a big price, but in Russia 5$ is more expensive, than in other countries (and I talk about not-central Russia).
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 12 January 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 21 October 2013 at 3:25pm
I'll write up a news item to announce it for you and post by tomorrow morning. I've added to Chrome to test and its running quite smoothly and delivers on its promise.

If you need to get back your 5 dollars and have an extension page homesite where donations can be sent then we'll add that to the news item.
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 21 October 2013 at 3:54pm
Originally posted by jalonso

I'll write up a news item to announce it for you and post by tomorrow morning. I've added to Chrome to test and its running quite smoothly and delivers on its promise.

Okay. But extension works not as good as I want. GIF parsing still slow (because Javascript haven't byteArray and all data parsed from ASCII. And Javascript itself much slower than inline code) and takes tons of memory.

Originally posted by jalonso

If you need to get back your 5 dollars and have an extension page homesite where donations can be sent then we'll add that to the news item.

No-no. I'm talked about it only as fun fact. All job done only for 1 reason - make people happy while they using Chrome.
Most of my friends, told me, that I'm idealist, and didn't request gain in most of my works. So, I'll try to fix it.
*Edited by jal*
If it's necessary, I can create a web page with this information.

Edited by jalonso - 21 October 2013 at 4:34pm
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 12 January 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 21 October 2013 at 4:36pm
To be safe. I've removed all that personal info and will PM you if needed.
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 12 January 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 25 October 2013 at 8:03am
There might be a small bug in the extension.
In some pieces when you zoom to view if the art has a transparent (mask) background then the zoom view shows the color being masked. Is this to be expected in some pieces only?
This piece does it
http://www.pixeljoint.com/pixelart/81449.htm

Edited by jalonso - 25 October 2013 at 8:03am
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 25 October 2013 at 10:23am
Originally posted by jalonso

There might be a small bug in the extension.
In some pieces when you zoom to view if the art has a transparent (mask) background then the zoom view shows the color being masked. Is this to be expected in some pieces only?
This piece does it
http://www.pixeljoint.com/pixelart/81449.htm

Yes, I know that. Bug of the GIF parser. (I'll fixed it in debug version and upload it soon). GIF specification didn't gives full explain of interpretation nuanсes. Like 0.01s must be converted to 0.1s (that do all browsers). Or how to work with transparent indexes, that equals to background color.

Also I'll add switch button to context menu (right button), that allows you to switch between canvas and original image.
And I'll disable GIF images zooming, if GIF image will have more than 65000 pixels in total. Because parsing of such large array of pixels in Javascript produces large amount of lagspikes. (You still will can activate zoom by pressing button, that I'll add, but you must be ready to lagspikes)
Problem is in Javascript speed. He is too slow. I have working parser in ActionScript (which significantly faster than JS in GIF parsing), but Chrome's FlashPlayer (Awesome-By-Google-Flash-Player™) didn't support ExternalInterface. Without it I can't send data between SWF and JS.
I can try Native Client (extension, that allows to launch C/C++ code in browser), but looks like Chrome blocks Native Client by default.
IP IP Logged
yrizoud
Commander
Commander
Avatar

Joined: 03 May 2021
Location: France
Online Status: Offline
Posts: 342
Quote yrizoud Replybullet Posted: 25 October 2013 at 11:38am
I feel your pain, I struggled with the GIF spec when I implemented animation in Grafx2.
Timing weirdness is the fault of web browser, who all chose different ways of not following the GIF spec. If you want to mimic Chrome's current behavior, you have to convert timings of 0 and 1 to be both = 10 (hundredth of seconds).
If you still have problems with BG color / Transparent color / Disposal method, I can probably help. I also have somewhere a small collection of GIF images that use different combinations of all these options.

IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 25 October 2013 at 12:32pm
Originally posted by yrizoud

I feel your pain, I struggled with the GIF spec when I implemented animation in Grafx2.Timing weirdness is the fault of web browser, who all chose different ways of not following the GIF spec. If you want to mimic Chrome's current behavior, you have to convert timings of 0 and 1 to be both = 10 (hundredth of seconds).If you still have problems with BG color / Transparent color / Disposal method, I can probably help. I also have somewhere a small collection of GIF images that use different combinations of all these options.

I'll glad to you, if you give me that GIFs for testing. I'm already resolver trasnparent/bg problem, but I didn't realized DisposalMethod.RestorePrevious (because I didn't finded any GIFs with using of that method). Also, didn't know, that 0 timing must be convertet to 10 too.
Also, did you know any method to speed up executing of GIF processing inside browser? Javascript is too (very, very, very) slow. And GoogleFlashPlayer didn't support ExternalInterface.
IP IP Logged
yrizoud
Commander
Commander
Avatar

Joined: 03 May 2021
Location: France
Online Status: Offline
Posts: 342
Quote yrizoud Replybullet Posted: 25 October 2013 at 2:38pm
Don't bother with RestorePrevious : I don't think any web browser actually implements it, so if somebody puts such GIF in a web page, it already displays as broken.
Speed : The only trick I can think is something you are maybe already doing : GIF frames can be "differences", but you should build a complete image of each frame in memory. This way, you can skip frames if the display is not fast enough to display them as fast as requested.

I dug back the origins of my sample images :
http://www.pixeljoint.com/pixelart/50153.htm (classic with transparent BG)
http://www.pixeljoint.com/pixelart/63475.htm (BG is not transparent)
http://www.pixeljoint.com/pixelart/63454.htm (BG is not transparent, uses delta-compression IIRC)
http://www.pixeljoint.com/pixelart/63865.htm (preview image, all blinking frames have zero-duration: Shame on you Jinn for abusing the GIF format !)
http://www.pixeljoint.com/pixelart/71438.htm (BG is not transparent, I had problem with the color of hands/feet)
(140Kb animation warning) http://www.pixeljoint.com/pixelart/21653.htm
(740Kb animation warning) http://www.pixeljoint.com/pixelart/56897.htm
The last two were made by Stickman using a program that saves GIF animations with one of the two DisposalMethods that don't clear ('default' and 'do not dispose'), following frames replace the smallest rectangle that has any modification compared to the previous frame.

IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 25 October 2013 at 3:18pm
Originally posted by yrizoud

Don't bother with RestorePrevious : I don't think any web browser actually implements it, so if somebody puts such GIF in a web page, it already displays as broken.Speed : The only trick I can think is something you are maybe already doing : GIF frames can be "differences", but you should build a complete image of each frame in memory. This way, you can skip frames if the display is not fast enough to display them as fast as requested.

Thanks, I'll implement that method into player.

Originally posted by yrizoud

http://www.pixeljoint.com/pixelart/50153.htm (classic with transparent BG)
http://www.pixeljoint.com/pixelart/63475.htm (BG is not transparent)
http://www.pixeljoint.com/pixelart/63454.htm (BG is not transparent, uses delta-compression IIRC)
http://www.pixeljoint.com/pixelart/63865.htm (preview image, all blinking frames have zero-duration: Shame on you Jinn for abusing the GIF format !)
http://www.pixeljoint.com/pixelart/71438.htm (BG is not transparent, I had problem with the color of hands/feet)(140Kb animation warning)


Parsed perfectly well! (Blinking frames delayTime automatically setted to 10, as Chrome does, delta-compression IIRC worked only after small bugfix (with transparency===bgColor)).

Originally posted by yrizoud

http://www.pixeljoint.com/pixelart/21653.htm(740Kb animation warning)
http://www.pixeljoint.com/pixelart/56897.htmThe last two were made by Stickman using a program that saves GIF animations with one of the two DisposalMethods that don't clear ('default' and 'do not dispose'), following frames replace the smallest rectangle that has any modification compared to the previous frame.

This is worked with small issues. First produced visible lagspikes while parsing GIF image, second parsed very long and with many short-timed lagspikes.

Looks like parser works well, but JS speed isn't enough to do parsing fast. I'll try NativeClient, but not sure, that Chrome will allow me to use it inside background page (he can block NativeClient extension, like he do it with Java Applets).
P.S. Lol, I got too many ops (or something else) per function, so tab is crashed (and taked all other opened parent/neighbord tabs): Image

UPD: Found image, that uses RestorePrevious disposal method: http://www.imagemagick.org/Usage/anim_basics/canvas_prev.gif. Chrome works with that method as must. My parser didn't. Because this method didn't implemented xD

Edited by Yanrishatum - 25 October 2013 at 4:34pm
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 26 October 2013 at 5:14pm
Wow, this was a big update. So, version passed from 1.1 to 1.4. And for good reason.
First of all, I'm fixed bug, that really slows down GIF processing (My fault: I used Array.concat instead of Array.push.apply). Now it works many times faster.
* Rewrited almost all code, so JPG/PNG and GIF processors not so separate in code. (And this gives me a basis to add in-page image scaling)
* Added switch button between canvas/original images to context menu (right click). That was a reason, why extension now requires "tabs" permission. Content Scripts didn't allowed to manipulate with context menus and I'm need to create bridge between content script and background page. (Sending data between background page and content scripts requires "tabs" permission)
* GIF viewing works now much better and (I hope) shows all images correclty (exclude images, that use Disposal Method 3, but to gifs, that uses this method extensions will show next message: )
* If GIF image have over 1048576 pixels in total (1024x1024 image) parsing will stops and shows alert, that parsing can produce lagspikes, so user must activate parsing manually.
Alert! After update, Chrome will disable extension and requests you to approve extension permissions again, because I added "tabs" permission to manifest (explained "why" earlier).

Oh, I have small offer (not sure, that I'm used right word) to Pixeljoint: I can provide code, that replaces zoomed image to canvas, while user presses zoom buttons on Chrome.
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 13 December 2013 at 8:15am
Long time with other projects (and all of them are related to pixelart :) One of them, I believe, will blow up russian part of pixelart community.), and finally a got time to work with this plugin. Again rewritten almost all code. But there only 2 new features:
1. Options page.
2. In-page viewing.
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 22 January 2014 at 11:58am
Updated to 2.3.0. Now work much faster and with full in-page viewing feature support!
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 12 January 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 19 July 2014 at 11:54am
IP IP Logged
Yanrishatum
Midshipman
Midshipman
Avatar

Joined: 19 January 2016
Online Status: Offline
Posts: 21
Quote Yanrishatum Replybullet Posted: 19 February 2015 at 2:17am
Well. Long time no updates. But now extension finally has restored in WebStore and fully usable (previous version is broken, because of new Webkit version, that removed hacky gif rendering on canvas).
Extension also fully rewritten on Haxe and using my own gif image decoding highly optimized for less memory usage.
Version 3.0.0:
Fully rewritten extension. Nuff said :D
IP IP Logged
ningleelove
Seaman
Seaman


Joined: 06 March 2015
Online Status: Offline
Posts: 1
Quote ningleelove Replybullet Posted: 06 March 2015 at 4:18pm
這幅畫很好看~
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