Preserving image quality when zooming in ion-scroll


#1

I am using ion-scroll to zoom on an image but when I zoom on it it appears blurred (image resolution is good enough).

I suspect that the image does not get re-rendered when I zoom but instead it just stretches the initially rendered image.

Is there a way I can force the re-rendering?


#2

Most likely a jpg or png right? Hmm, want to open an issue for this? Seems like we could do some research to see what we could do to resolve this.

I’m not too familiar with zynga, which are scroller is based off of.


#3

I’ll definitely do that.

There is also an issue with scrolling when you start swiping vertically or horizontally you cannot change direction but when starting your swiping diagonally then you can free-scroll in whatever direction you like.

Is there a way we can define to always use free-scroll?


#4

Right now, I don’t think so, since it’s not really built into zynga. What you’re describe is how zynga makes sure it doesn’t overload it’s self and translates the image correctly. It’s kind of a fail safe to make sure things work smoothly


#5

@mhartington zynga does have a lock scrolling feature by setting locking = true what we need is to enable this as a directive variable in ion-scroll so we can control if we want the locking feature or not.


#6

Awesome, I didn’t know this! I’ll open an issue for this to be exposed. I already have one for zoomBy so this will hopefully added to at the same time

https://github.com/driftyco/ionic/issues/2034


#7

Have we discovered anything new with the image quality issue? I’m facing the same problem, where zoomed images are very gritty.


#8

@isherwood, we have discovered that we can’t fix it :smile:

The problem is in webkits rendering method that scales down the image to its initial output size before passing it to the gpu. The gpu then uses the scaled down image when you zoom in thats why everything is blured.

You could try rendering the whole image at its native dimentions and then zoomout… I haveny tried it but i suspect it should work


#9

Thank you. I’ll do that. At this point the image is loading full-res, but I can only zoom it larger using zooming="true". Any suggestions on how to zoom out manually or on load?


#10

I encountered the same issue. Setting initial zoom didn’t fix it.

Trying to make my own workaround I discovered that this blurring was occurring in the img-tag as wel. I found out that images with a resolution from around 5500x3500 pixels are blurred anyway, also in a simple img tag

Open this link on your phone: http://dog3.nl/test/mobileResolutionTest.html

On my S4 from image 5 the images are blurred.

I now simply resized my images to 5000x3300 and it al works fine. Offcourse, only because it’s still big enough for my purposes.

I only tested it on a Samsumg S4, so I have no idea wether an image 5000x3300 shows well on every phone or not.
But we can be sure it is nog an ionic-issue.


#11

Anything new on this topic? How to preserve image quality with zoom enabled? Or at least how to allow user to see the image in full size if the style width is set to 100%


#12

even after long experimentation I did not manage to solve this problem on my app.
But I have seen a post of a guy claiming to have actually found a workaround, I haven’t tried it myself but here is the link. Please post back if you mange to get it working.


#13

I don’t get this on GitHub…can anyone decypher it :slight_smile:


#14

I don’t get much of the comment either but code is a universal language…follow what he is doing