Comment utiliser Color-Thief.js?

Question

Je suis un débutant avec ce script (très intéressant), et j'essaie de savoir comment l'utiliser.

Sur son site GitHub, il est dit:

var colorThief = new ColorThief(); 
colorThief.getColor(sourceImage); 

Mais qu'est-ce sourceImage? Un lien vers l'image? Un objet jQuery de l'image (comme $ ("img"))? Ou quoi?

Ce serait bien si quelqu'un peut créer un violon afin que je puisse voir le code en action. PS: J'ai également essayé de regarder dans la source de its website, mais je ne pouvais pas comprendre.

Answer 1

Le author's blog a cet exemple:

myImage = $('#myImage'); 
dominantColor = getDominantColor(myImage); 
paletteArray = createPalette(myImage, 10); // 2nd argument sets # of colors in palette 

L'article est vieux, le code est donc plus le même, mais je suppose que sourceImage dans votre exemple est le même que myImage dans ce cas.

En outre, à partir du code de la démo:

$('.run-functions-button').on('click', function(event) { 
    var $this = $(this); 
    $this.text('...'); 
    var $imageSection = $this.closest('.image-section'); 
    var $colorThiefOutput = $imageSection.find('.color-thief-output'); 
    var $targetimage = $imageSection.find('.target-image'); 
    showColorsForImage($targetimage, $imageSection); 
    }); 

.run-functions-button sont les boutons jaunes "TAP". Il récupère les fermetures image-section, et le target-image à l'intérieur. Ensuite, il appelle showColorsForImage($targetImage, $imageSection).

En showColorsForImage il y a cette ligne:

colorThief.getColor(image). Je suis donc certain que c'est un objet image, comme l'a déjà souligné Frèdèric dans son commentaire.

Answer 2

sourceImage est une référence à une image déjà déclarée.