javascript - Color Thief won’t work … -
i’d use color thief, script allows extract dominant color of image.
unfortunately i’m not able code work. i’d dominant color background color of div called mydiv.
here’s have far: http://jsfiddle.net/srd5y/4/
updated code / transfered own server due cross-linking issues: http://moargh.de/daten/color-thief-master/test.html
js
var sourceimage = 'https://www.google.de/intl/de_all/images/logos/images_logo_lg.gif'; var colorthief = new colorthief(); colorthief.getcolor(sourceimage); html
<div id="mydiv"></div> thanks help!
try based on code , mix of everyone's answers. need wait image load before using color theif. color photo1.jpg should [125, 190, 193]
thanks @shadow wizard , @ejegg
see official way ask jquery wait images load before executing something
edit: ok use fiddle works http://jsfiddle.net/bgykt/
<head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/color-thief.js"></script> <style type="text/css"> #mydiv { width: 100px; height: 100px; border: 1px solid #000; } </style> </head> <body> <img src="img/photo1.jpg" id="myimg" /> <div id="mydiv"></div> <script> $(window).ready(function(){ var sourceimage = document.getelementbyid("myimg"); var colorthief = new colorthief(); var color = colorthief.getcolor(sourceimage); document.getelementbyid("mydiv").style.backgroundcolor = "rgb(" + color + ")"; }); </script> </body>
Comments
Post a Comment