meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation
http://camanjs.com
BSD 3-Clause "New" or "Revised" License
3.55k stars 404 forks source link

Rendering multiple images gives garbled output #46

Closed ghost closed 11 years ago

ghost commented 11 years ago

When I apply a complicated filter to more than one image, I get incorrect results. It looks like CamanJS is getting the dimensions of the images mixed up, causing problems with (at least) the vignette filter.

If I chain all the callbacks so that images render sequentially, I get correct results - but it's awkward. Any idea what's going on?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simultaneous rendering</title>
  <script type="text/javascript" src="../../dist/caman.full.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script type="text/javascript">
Caman.DEBUG = true;
var ids = ["#img0", "#img1"];
for (var i in ids) {
    Caman(ids[i], function() {
        this.lomo().render();
    });
}
  </script>
</head>
<body>
  <img id="img0" alt="test image" src="../images/test1_600.jpg" />
  <img id="img1" alt="test image" src="../images/test1_1280.jpg" />
</body>
</html>

The rendered output then looks like:

600x401 with Lomo

1280x856 with Lomo

ghost commented 11 years ago

Editing RenderJob to log the canvas ID for each filter applied, I get something like this:

[16:00:04.853] Filter brightness finished for canvas 0! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:05.282] Filter curves finished for canvas 1! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:05.328] Filter saturation finished for canvas 0! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:05.710] Filter gamma finished for canvas 1! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:05.797] Filter vignette finished for canvas 0! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:05.918] Filter brightness finished for canvas 1! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:05.986] Filter brightness finished for canvas 0! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:06.433] Filter curves finished for canvas 1! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:06.476] Filter saturation finished for canvas 0! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:06.810] Filter gamma finished for canvas 1! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:06.920] Filter vignette finished for canvas 0! @ http://0.0.0.0:8000/dist/caman.full.js:1311
[16:00:07.043] Filter brightness finished for canvas 1! @ http://0.0.0.0:8000/dist/caman.full.js:1311

Apparently all of the render jobs get added to one global render queue, with no record of which canvas they're actually supposed to work on. Then the two Caman instances take turns popping jobs off the global queue and executing them on their own canvas. So instead of executing jobs 123456 and ABCDEF, they execute 135ACE and 246BDF.

Presumably each instance should have its own render queue?