Kolor Złodziej nie działa ...

Chciałbym użyć Color Thief, skryptu, który pozwala wyodrębnić dominujący kolor obrazu.Kolor Złodziej nie działa ...

Niestety nie jestem w stanie uruchomić kodu. Chciałbym, aby dominującym kolorem był kolor tła elementu div o nazwie mydiv.

Oto co mam do tej pory: http://jsfiddle.net/srd5y/4/

Updated/kod przeniesiony do własnego serwera z powodu sieciowania zagadnień: http://moargh.de/daten/color-thief-master/test.html

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>

Dzięki za pomoc!

Źródło

2013-09-03 user1706680

w jsfiddle, color-thief.js zawiera znaczniki HTML zamiast javascript. Sprawdź konsolę błędów. – akonsu

Przepraszam za to - naprawiono. – user1706680

Dla przykładu skrzypce, nie sądzę, że Color Thief może krzyżować domeny – Murtnowski

Try to w oparciu o twój kod i mieszankę odpowiedzi wszystkich. Przed użyciem Color Theif należy zaczekać na załadowanie obrazu. Kolor powinien być dla photo1.jpg [125, 190, 193]

Dzięki @Shadow Kreator i @ejegg

Zobacz Official way to ask jQuery wait for all images to load before executing something

EDIT: Ok użycie tego skrzypce który działa 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>

Źródło

2013-09-03 20:50:13 Murtnowski

Dodałem obsługę, ale nadal nie działa. http://moargh.de/daten/color-thief-master/test.html – user1706680

@ user1706680 Brakujący koniec) na linii 42 – Murtnowski

Dzięki, zaktualizowane! Ale nadal nie ma koloru tła. – user1706680

Murtnowski ma rację, mówiąc, że operacja zakończy się niepowodzeniem, jeśli uruchomisz ją na obrazie hostowanym w innej domenie. Jeśli używasz go na obrazie hostowane na własnej domenie, wystarczy zadzwonić GetColor z elementu img zamiast URL:

HTML

<img src="/images/foo.jpg" id="myImg" />

var sourceImage = document.getElementById("myImg"); 
var colorThief = new ColorThief(); 
colorThief.getColor(sourceImage);

Źródło

2013-09-03 20:30:11 ejegg

Dzięki, tworzę sugestie i wgrałem je na mój serwer z powodu problemu z połączeniem: http://moargh.de/daten/color -thief-master/test.html Jak mogę uzyskać wartość zmiennej 'colorThief'? – user1706680

@ user1706680 musisz ręcznie ustawić np. 'var color = colorThief.getColor (sourceImage); document.getElementById ("mydiv"). style.backgroundColor = "rgb (" + color + ")"; ' –

Dziękuję, zaktualizowałem kod, ale nadal nie działa ... Dodałem także obsługę zdarzeń sugerowaną przez Murtnowskiego. – user1706680

Walczyłem przez kilka godzin, aby uzyskać color-thief do pracy. W końcu to był malutki dodatek [0] pkt do pierwszego elementu tablicy:

<img id="theimage" src="images/p1-340-thumb.jpg" /> 

myImage = $('#theimage'); 
colorThief = new ColorThief(); 
color = colorThief.getColor(myImage[0]); 
red = color[0]; 
green = color[1]; 
blue = color[2];

Źródło

2013-10-07 21:37:50 bmerigan

Dobry połów. Zestawy zawijane jQuery nie są ich podstawowymi elementami DOM, a wiele bibliotek wymaga podania elementu DOM. To mnie ugryzło kilkakrotnie. :) http://stackoverflow.com/questions/1677880/how-to-get-a-dom-element-from-a-jquery-selector – Palpatim

ja miałem ten sam problem i rozwiązać go w ten sposób:

// get my image url 
var imageUrl = '//myimage.ulr.com'; 
// than create an image elm, the sizes are needed. 360x360 on this case 
var image = new Image(360, 360); 


image.onload = function(){ 
    // act only after image load 
    console.log(image); 

    // than colorThief and get the color value 
    var colorThief = new ColorThief();   
    var color = colorThief.getColor(image); 
    console.log(color); 
}; 
image.src = imageUrl;

nadzieję, że to pomaga ktokolwiek

Źródło

2016-08-13 00:06:16 diegofelipece

Nie mogę tego zmusić ... W końcu próbuję ciągnąć w obrazie tła elementu, ale nawet upraszczając go do twojego przykładu, z jawnie zdefiniowanym adresem URL ... Wciąż nic nie dostaję. Jakieś pomysły, dlaczego? http://codepen.io/chasebank/pen/xEAAWE – Chase

Kolor Złodziej nie działa ...

Odpowiedz

Powiązane problemy