search

brianchirls / Seriously.js

A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
MIT License
3.87k stars 354 forks source link

Stange issue with toDataURL(); in mobile Safari and Phonegap #106

Open ghost opened 8 years ago

ghost commented 8 years ago

I'm working on a Phonegap app where users can apply different LUTS to an image. Users can try out different luts and then save the resulting image (canvas.toDataURL).

This works great on desktop, but in mobile Safari (Phonegap as well as in a mobile browser) canvas.toDataURL() always returns the previous LUT the user had chosen, not the last one. Furthermore, somehow canvas.toDataURL(); replaces the canvas itself.

I’ve made an example of the issue here: http://drawnimation.com/dev/lut/

On desktop browsers it works fine: if you select a lut and press the “toDataURL();” button, the expected output appears below, but on mobile Safari you’ll see the previously chosen LUT appear, and the canvas itself is also reset to the previously chosen LUT.

It there an issue in my code, or a browser issue, or is there a workaround? Any pointers would be greatly appreciated. And thanks for this wonderful library!

brianchirls commented 8 years ago

It's working just fine for me in iOS Simulator. I don't have an actual iPhone or iPad I can test on. Which version of iOS are you using? I've got 8.2.

But, there are some improvements you can make to the code:

  1. You don't need to create a new lut node every time. You can use the same one and just switch out the lut input. The way you're doing it now is unnecessarily taking time to allocate a new node and is leaking memory because the old nodes you're not using anymore are not being released.
  2. You don't need to call seriously.go() every time you change the LUT. You can run it once in the beginning and then just leave it alone.
ghost commented 8 years ago

Thanks for the quick reply! So you don't see the top image jumping back to the previously seleted lut when you press toDatURL();? It happens on both my iphone and ipad (running ios 8.4). Could it be an ios 8.4 bug? It's so strange that toDataURL(); affects the canvas itself, and not just outputs the data.

Thanks for the pointers about my code, I'll update it!

brianchirls commented 8 years ago

Nope, didn't have that problem.

Maybe there's something going on with the click handlers. Are you using remote debugging to step through and make sure they're only running once?

You might also try attaching those click handlers with jquery rather than using the onclick attribute right in HTML. That's not really the best way to do it anyway.

On Tue, Sep 15, 2015 at 2:02 PM, zompzomp notifications@github.com wrote:

Thanks for the quick reply! So you don't see the top image jumping back to the previously seleted lut when you press toDatURL();? It happens on both my iphone and ipad (running ios 8.4). Could it be an ios 8.4 bug? It's so strange that toDataURL(); affects the canvas itself, and not just outputs the data.

Thanks for the pointers about my code, I'll update it!

— Reply to this email directly or view it on GitHub https://github.com/brianchirls/Seriously.js/issues/106#issuecomment-140484712 .

ghost commented 8 years ago

Thanks, I updated the code and removed the onclick handlers, but the problem still persists in Safari ios. I've used toDataURL(); in all sorts of scripts on ios, so I don't understand why it's not working in combination with seriously.js. I'll keep on trying to find the issue and let you know if I find a solution. Tomorrow ios 9 will be released, so who knows... Thanks for all your help!