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

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w
Read more

php - $params->set Array between square bracket -

i'm using k2 in joomla 3.3. i'm trying set params (items ids ) module k2_content item.php file. result must between brackets, like: ["96","68"] my code is: $query = "select * #__k2_items extra_fields_search = '$myautor' , catid !=1 " ; $db->setquery($query); $losautores = $db->loadobjectlist(); $result = array(); foreach ($losautores $key => $value) { $result[] = '" '.$value->id.' "'; } $string_version = implode(',', $result); $autoresfinal = '['.$string_version.']'; if test using print, looks ok. passing var pramas, 1064 error. $params->set('items', $autoresfinal); to test tried $autoresfinal = ["96","68"]; and works fine. idea why doesn't work? thank you. if assign ["x","y"] assigning an array . here transforming array in st
Read more