javascript - このjQueryイベントで、CamanJSが実際に画像の色相を変更するdata-caman値を設定するにはどうすればよいですか?

Question

同じ画像の異なる部分を個別に変更できるように、2 つの画像を重ね合わせています。

<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>

これにより、次のような要素として、色相が変更された両方の画像が正常に出力されます。

<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">

...しかし、「button2」がクリックされると、これ:

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

文字どおり属性を に変更するだけですdata-caman="saturation(0) brightness(0) hue(70)"。CamanJS によって解析されず、元の画像が表示されるだけです。

をクリックbutton2して、関数に適切な範囲の数値を生成させ、画像の色相をリセットし、プロセスのためにページを更新することなくこれを繰り返すことができるようにしたいと思います。それ以外の場合は、PHP で色相値を生成するだけで済みます。ページが読み込まれるたびに。

関数を使用して実際に値を変更するにはどうすればよいですか? それが不可能な場合、私がやろうとしていることを達成するための良い代替手段は何ですか?