6

CamanJS is a great library for doing live image manipulation in the browser.

I am using Caman on a pre-existing canvas object. I may need to change the image on that canvas if a user goes 'back' to a previous area of my site and then comes forward to the canvas again.

Caman appears to cache the first image data it receives and then 'locks' the canvas to its context. Attempts to change the canvas after applying Caman result in no visible change to the canvas.

How can we change our canvas data outside of Caman and then re-apply Caman filters?

Stephen
  • 642
  • 1
  • 4
  • 22

1 Answers1

11

I emailed Ryan (creator of CamanJS) and he replied that there's a function called reloadCanvasData() that can be called to 'refresh' Caman's image data cache with any changes to the canvas's original context. Here's the source link: https://github.com/meltingice/CamanJS/blob/master/src/core/caman.coffee#L387-L392

This worked perfectly: store the Caman instance you create for your canvas and then call .reloadCanvasData() on any subsequent runs. You'll then need to re-apply any Caman manipulations you desire.

I wanted to document this function as google doesn't appear to contain any references to it yet.

ptCoder
  • 2,229
  • 3
  • 24
  • 38
Stephen
  • 642
  • 1
  • 4
  • 22
  • 1
    Thank you! I have to say, Caman.js itself is awesome, but they need better documentation – there's no mention of that in any of the guides or anything. I never would have stumbled across that myself just looking through the code... – daGUY Sep 08 '14 at 17:55
  • Agreed! Glad this helped you. – Stephen Sep 08 '14 at 21:27
  • Hi @Stephen, can you give a little guidance about how to implement `.reloadCanvasData()`? I have already tried something like `canvas.reloadCanvasData()`, `Caman.reloadCanvasData(canvas)`, and some more. Any help will be appreciated. Thanks! And sorry, I know this question is quite old, but still relevant. – Horacio Apr 21 '16 at 01:55
  • Found it! something like this: `Caman('#canvas', function() { this.reloadCanvasData(); this.brightness(10); this.render(); });` – Horacio Apr 21 '16 at 02:13