Question

我有两个图像叠加在一起，所以我可以独立修改同一图片的不同部分：

<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生成色调值。

如何使用该功能实际更改值？如果不可能，那么完成我想做的事情会有什么好办法呢？

如何使这个jQuery事件设置数据caman值，使CamanJS实际上改变图像的色调？

0 个答案: