0

我有两个相互分层的图像，因此我可以独立修改同一张图片的不同部分：

<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 生成色调值每次页面加载时。

如何使用该函数实际更改值？如果不可能，那么完成我想做的事情的好选择是什么？

4

0 回答 0