0

I have two images layered over each other so I can modify different parts of the same picture independently:

<div id="box">
   <div class="woof"><img data-caman="saturation(0) brightness(0) hue(50)" src="charm1.png" /></div>
   <div class="woof"><img data-caman="saturation(0) brightness(0) hue(50)" src="charm2.png" /></div>
</div>
<div id="button2">data caman tho?</div>

This successfully outputs both images with changed hues, as elements like:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAABv0lEQVR4Xu3WsVHDQBgF4XOm0CGhSnAZhIQqhRIIKUMlUAYlKCR0eJmYky1hGCeevWNG/6xjnrE/70k6JF9I4IDWjpOAMAIBBYQCcG6BAkIBOLdAAaEAnFuggFAAzi1QQCgA5xYoIBSAcwsUEArAuQUKCAXg3AIFhAJwboECQgE4t0ABoQCcW6CAUADOLVBAKADnFiggFIBzCxQQCsC5Be4NsDvlOX92YX64f/0i0fBKvO0BX85zN3XLQcmvXykNffv/CY/lI/N2X+YGLipeuwLHae7eni7V9TmVAiPW1w7wWl9BK5BR8doA3tZXrnnrK9i1b/1ada+B9/DGY0rDebt5RLsTNwNcbxzbEQ5aYj3Am/r+PgYs18DyCniMmwFud98+/zrCjzxj7eFvqwKm8bg8stw9vgHrq38Xvh7jfHq/xPM8hD26be7C5V3HaU4f4w9g0PLaAe7hwlXxM9a7Blb8UHt6KwHhryWggFAAzi1QQCgA5xYoIBSAcwsUEArAuQUKCAXg3AIFhAJwboECQgE4t0ABoQCcW6CAUADOLVBAKADnFiggFIBzCxQQCsC5BQoIBeDcAgWEAnBugRDwGy8ZZlHkQI3kAAAAAElFTkSuQmCC" width="80" height="80">

...but when "button2" is clicked, this:

<script>
$(document).ready(function() {
  $( '#button2' ).click(function() {
    $(".woof").first().html('<img data-caman="saturation(0) brightness(0) hue(70)" src="charm1.png" />');
  });
});
</script>

only literally changes the attribute to data-caman="saturation(0) brightness(0) hue(70)". It's not parsed by CamanJS, and it just displays the original image.

I would like to click button2, have the function generate a number in the appropriate range and reset the image's hue, and be able to repeat this without having to refresh the page for the process -- otherwise, I could just generate the hue value with PHP each time the page loads.

How can I actually change the values, using the function? If it's not possible, what would be a good alternative to accomplish what I am trying to do?

HB-
  • 635
  • 2
  • 8
  • 21
  • 1
    Can you just change your script such that you do not replace the entire node, but simply use `.attr('data-camam')` or `.data('caman')` to update the attribute value? Also, this operates under the presumption that the plugin actually does not cache the value of the `data-caman` attribute, otherwise you will have to find another way to reinitialize it (so that it reads the new `data-caman` values). – Terry May 05 '15 at 09:10
  • Thanks a ton, it looks like you might be right about the cacheing -- [here](http://stackoverflow.com/questions/20481081/camanjs-change-underlying-canvas-after-applying-filters-manipulations) is a relevant post. I don't suppose you know if it'd be possible to call reloadCanvasData() without actually having a canvas instance, just the attribute? – HB- May 05 '15 at 09:55

0 Answers0