CamanJS - change underlying canvas after applying filters/manipulations

Question

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?

Answer 1

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.