AuthorTopic: Preventing blurry images in chrome?  (Read 16649 times)

Offline surt

  • 0011
  • **
  • Posts: 570
  • Karma: +0/-0
  • Meat by-product
    • not_surt
    • http://pixeljoint.com/p/2254.htm
    • View Profile
    • Uninhabitant

Re: Preventing blurry images in chrome?

Reply #20 on: May 31, 2013, 10:12:08 am
You can load the image data in an image element, draw the image to a canvas with the canvas drawImage method, then you have the image data in a fully manipulable form without any need for server-side.

I'd just grab the image data from the the standard forum image and swap the image element out for a canvas if the user-agent string matches chrome and whatever other browsers happen to be problematic.

This works fine for me, no need for any complex CORS stuff.

EDIT:
Nevermind, I think you're right. I'm not actual using the getImageData here.
« Last Edit: May 31, 2013, 10:29:48 am by surt »

Offline Crow

  • 0011
  • **
  • Posts: 647
  • Karma: +0/-0
  • Technicanimal
    • View Profile

Re: Preventing blurry images in chrome?

Reply #21 on: May 31, 2013, 11:17:20 am
As I said, the code is in place:
http://www.wayofthepixel.net/Themes/default/scripts/zoom.js

But not active due to it not working. CORS only works when supported by the server hosting the images. So, it'd work with one image out of about 1000 if we were lucky.
Discord: Ennea#9999

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Preventing blurry images in chrome?

Reply #22 on: May 31, 2013, 12:15:01 pm
Hmm ... I see. It was pretty na´ve from me to ignore those security restrictions (although I do not see who exactly they protect against what  :-\).

So not even storing in local would help, would it ?

Offline Ambivorous

  • 0010
  • *
  • Posts: 365
  • Karma: +2/-0
  • If you can't do; inspire.
    • ambivorous
    • ambivorous
    • http://pixeljoint.com/p/47949.htm
    • ambivorous
    • View Profile

Re: Preventing blurry images in chrome?

Reply #23 on: May 31, 2013, 12:35:21 pm
The only way to read image data using JavaScript is a canvas. I'm out of clientside options here. JavaScript does not support any file processing, mostly for security reasons. I can't just process an image, not even if I'd write something that'd read a PNG file raw. My plan: Ajax call to the server which will send the image back as a data URI; a base64 encoded string which contains the images. Chances are you've seen that before. I can put that on the canvas, since it has no origin. I can even place it in HTML5's local storage so the server doesn't have to process the same images over and over again. I'd say that is the best solution for now.
I thought your plan was to send the zoomableimage.php file the desired images URL along with a zoom multiplier via POST and then have it become the zoomed in image.
The .php file would obviously just read in the image, quadruple each pixel using no more than a for loop and display it.

That does have the downside of having the image with the .php extension instead of .png, .jpg, etc..
I wouldn't know how to do it myself, but I just figured PHP does have image manipulation capabilities. Not possible? If it is possible then it should then work for animated .gifs as well.
* may contain misinformation

Offline Crow

  • 0011
  • **
  • Posts: 647
  • Karma: +0/-0
  • Technicanimal
    • View Profile

Re: Preventing blurry images in chrome?

Reply #24 on: May 31, 2013, 12:42:33 pm
Hmm ... I see. It was pretty na´ve from me to ignore those security restrictions (although I do not see who exactly they protect against what  :-\).

So not even storing in local would help, would it ?

I can't store it locally without getting the data URL first, which I can't when the canvas is tainted, so I'll have the server do that instead.


I thought your plan was to send the zoomableimage.php file the desired images URL along with a zoom multiplier via POST and then have it become the zoomed in image.
The .php file would obviously just read in the image, quadruple each pixel using no more than a for loop and display it.

That does have the downside of having the image with the .php extension instead of .png, .jpg, etc..
I wouldn't know how to do it myself, but I just figured PHP does have image manipulation capabilities. Not possible? If it is possible then it should then work for animated .gifs as well.

Generally speaking, the more of the processing is done on the user's computer, the better. There's of course the downside of GIFs not working in this case, but maybe that's excusable. We'll see :D
Discord: Ennea#9999