Question

我试过但我不能这样做我选择一张图像在<img src=" " onload="getPixels(this)" id="mug"/>显示，然后该功能会改变图像颜色。

当我再次更改图像时，它的颜色不会改变，但它会改变第一个图像的颜色，而不是改变新图像的颜色。

请帮帮我，我不知道:(

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

            <img src="<?=''?>" onload="getPixels(this)" id="mug"/>

      <a onClick="showImage(this);" href="#bg/big-polka-dots.png" data-href="bg/big-polka-dots.png">
        <img src="bg/big-polka-dots.png" width="35" height="56"/>  
      </a>  

     <a onClick="showImage(this)" href="#bg/chevron-navy.png" data-href="bg/chevron-navy.png">
        <img src="bg/chevron-navy.png" width="35" height="56"/>  
      </a>  
      <a onClick="showImage(this)" href="#bg/maple-leaf-lattice.png" data-href="bg/maple-leaf-lattice.png">
        <img src="bg/maple-leaf-lattice.png" width="35" height="56"/>  
      </a> 
       <a onClick="showImage(this)" href="#bg/stars-navy.png" data-href="bg/stars-navy.png">
        <img src="bg/stars-navy.png" width="35" height="56"/>  
      </a>

<script>
function showImage(link)
{   
    var url = link.href;
    url = url.substr(url.indexOf('#')+1);   
    document.getElementById("mug").src=url;

}
</script>


 <div style="background-color:#B4CBEC; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#16becf; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#ade8e8; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#57d2c8; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#77989f; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#8dc63f; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#45b44a; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#b9eac6; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#2fb595; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#38605b; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
 <div style="background-color:#92278f; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#b16fc1; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#dbbadb; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#b3b3b3; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#f9ed32; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#fbb040; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#be1e2d; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#f16667; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#fabfa5; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#f0a0ab; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#808080; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#FFF; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div id="result" name="result" style="visibility:hidden; width:40px; height:40px; margin:5px; float:left;"></div>

<script>
        var mug = document.getElementById("mug");
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var originalPixels = null;
        var currentPixels = null;

        function HexToRGB(Hex)
        {
            var Long = parseInt(Hex.replace(/^#/, ""), 16);
            return {
                R: (Long >>> 16) & 0xff,
                G: (Long >>> 8) & 0xff,
                B: Long & 0xff
            };
        }
</script>
<script>
function rgbToHex(color) {
    if (color.substr(0, 1) === "#") {
        return color;
    }
    var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
        r = parseInt(nums[2], 10).toString(16),
        g = parseInt(nums[3], 10).toString(16),
        b = parseInt(nums[4], 10).toString(16);
    return "#"+ (
        (r.length == 1 ? "0"+ r : r) +
        (g.length == 1 ? "0"+ g : g) +
        (b.length == 1 ? "0"+ b : b)
    );
}
$("div").click(function() {
  var color = $(this).css("background-color");
  var color2 = rgbToHex(color);
  changeColor(document.getElementById("result").innerHTML = color2);
  });   

  function changeColor()
        {
            if(!originalPixels) return; // Check if image has loaded
            if(document.getElementById("result").innerHTML =='') return;
            var newColor = HexToRGB(document.getElementById("result").innerHTML);

            for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
            {
                if(currentPixels.data[I + 3] > 0)
                {
                    currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                    currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                    currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                }
            }

            ctx.putImageData(currentPixels, 0, 0);
            mug.src = canvas.toDataURL("image/png");
        }

        function getPixels(img)
        {
            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
            originalPixels = ctx.getImageData(0, 0, img.width, img.height);
            currentPixels = ctx.getImageData(0, 0, img.width, img.height);

            img.onload = null;

        }
</script>

Answer 1

在你的变色功能中，你总是更换杯子：

mug.src = canvas.toDataURL("image/png");

您还应该在更改图像时通过调用getPixels来更新存储在originalPixels中的图像数据。

更改图像onclick并更改画布中的图像颜色

1 个答案: