javascript - Change Image onclick and change Image color in canvas -
i tried can't it.
choose image shows in <img src=" " onload="getpixels(this)" id="mug"/> function changes image colors.
when change image again, color doesn't change changes color of first image instead of changing color of new one.
help me please don't have idea :(
<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 = 0, l = originalpixels.data.length; < l; += 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>
in change color function, change mug end :
mug.src = canvas.todataurl("image/png"); you should update image data stored in originalpixels calling getpixels when changing image.
Comments
Post a Comment