Color Thief wird nicht funktionieren ...

Ich möchte Color Thief verwenden, ein Skript, mit dem Sie die dominante Farbe eines Bildes extrahieren können.Color Thief wird nicht funktionieren ...

Leider kann ich den Code nicht funktionieren. Ich möchte, dass die dominierende Farbe die Hintergrundfarbe eines DIV ist, der mydiv genannt wird.

Hier ist, was ich bisher: http://jsfiddle.net/srd5y/4/

Aktualisiert Code/aufgrund vernetzende Fragen im Zusammenhang mit meinem eigenen Server übertragen: 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>

Danke für jede Hilfe!

Quelle

2013-09-03 user1706680

im jsfiddle, enthält color-dief.js HTML Markup anstelle von Javascript. Überprüfen Sie die Fehlerkonsole. – akonsu

Entschuldigung dafür - es ist behoben. – user1706680

Für Ihre Geige Beispiel glaube ich nicht, dass Color Thief kann Cross-Domain – Murtnowski

Try Dies basiert auf Ihrem Code und einer Mischung aus allen Antworten. Sie müssen warten, bis das Bild geladen ist, bevor Sie Color Theif verwenden. Die Farbe für photo1.jpg sollte sein [125, 190, 193]

Dank @Shadow Wizard und @ejegg

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

EDIT: Ok Verwendung dieser Geige, die http://jsfiddle.net/bgYkT/

arbeitet

<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>

Quelle

2013-09-03 20:50:13 Murtnowski

Ich habe den Handler hinzugefügt, aber es funktioniert immer noch nicht. http://moargh.de/daten/color-thief-master/test.html – user1706680

@ user1706680 Fehlendes Ende) auf Leitung 42 – Murtnowski

Danke, aktualisiert! Aber immer noch keine Hintergrundfarbe. – user1706680

Murtowski stimmt mit der Aussage, dass der Vorgang fehlschlägt, wenn Sie ihn gegen ein Image ausführen, das auf einer anderen Domain gehostet wird. Wenn Sie es auf ein Bild, gehostet auf Ihrer eigenen Domain betreiben, müssen Sie nur getColor mit einem img-Element nennen anstatt eine URL:

HTML

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

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

Quelle

2013-09-03 20:30:11 ejegg

Danke, ich habe deine Vorschläge eingebaut und auf den eigenen Server hochgeladen wegen der Querverweise: http://moargh.de/daten/color -thief-master/test.html Wie bekomme ich den Wert der 'colorThief'-Variable? – user1706680

@ user1706680 müssen Sie es manuell z. 'var color = colorThief.getColor (sourceImage); document.getElementById ("mydiv"). style.backgroundColor = "rgb (" + farbe + ")"; –

Danke, ich habe den Code aktualisiert, aber es funktioniert immer noch nicht ... Ich habe auch den Event-Handler Murtnowski vorgeschlagen. – user1706680

Ich kämpfte für ein paar Stunden um color-thief zu arbeiten. Am Ende war es die kleine Zugabe von [0] auf das erste Array Element zeigen:

<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];

Quelle

2013-10-07 21:37:50 bmerigan

Guter Fang. jQuery-Wrapped-Sets sind nicht ihre zugrunde liegenden DOM-Elemente, und bei vielen Bibliotheken müssen Sie ein DOM-Element übergeben. Das hat mich mehrmals gebissen. :) http://stackoverflow.com/questions/1677880/how-to-get-a-dom-element-from-a-jquery-selector – Palpatim

Ich hatte das gleiche Problem haben, und es auf diese Weise gelöst:

// 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;

Hoffe, es hilft irgendjemand

Quelle

2016-08-13 00:06:16 diegofelipece

Ich kann das nicht zur Arbeit bringen ... Ich versuche letztlich zu ziehen im Hintergrundbild eines Elements, aber sogar vereinfacht es zu Ihrem Beispiel, mit der URL explizit definiert ... Ich bekomme immer noch nichts. Irgendwelche Ideen warum? http://codepen.io/chasebank/pen/xEAAWE – Chase

Color Thief wird nicht funktionieren ...

Antwort

Verwandte Themen