如何使用Color-Thief.js？

-3

我是這個（非常有趣）腳本的新手，我試圖找出如何使用它。如何使用Color-Thief.js？

在其網站GitHub的，它說：

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

但什麼是sourceImage？指向圖片的鏈接？圖像的jQuery對象（如$（「img」））？或者是什麼？

如果有人可以創建一個小提琴，那麼我可以看到代碼在行動，這將是很好的。 PS：我也試過看its website的來源，但我搞不清楚。

來源

2014-06-13 DavideR

從插件的源代碼，它只是一個[Image]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement）實例。 –

你可能剛剛嘗試過... – ZiNNED

你有沒有試過它看到它的作用？嘗試之前嘗試嘗試。 –

的author's blog有這個例子：

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

文章是舊的，所以代碼不再是相同的，但我認爲sourceImage在你的例子是一樣的在這種情況下myImage。

另外，從演示的代碼：

$('.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是「TAP」黃色按鈕。它檢索關閉image-section和target-image裏面。然後它叫showColorsForImage($targetImage, $imageSection)。

在showColorsForImage有這一行：

colorThief.getColor(image)。所以我很確定這是一個圖像對象，正如Frèdèric在他的評論中已經指出的那樣。

來源

2014-06-13 14:51:42 link

第一個例子不是過時就是明顯錯誤：'getDominantColor（）'接受一個DOM元素，而不是一個jQuery對象，所以'myImage [0]'應該被傳遞而不是'myImage'。 –

這個例子很舊，我在回答中寫到（「代碼不再相同」）。第一行是'myImage = $（'＃myImage'）'。 – link

sourceImage是對已經聲明的圖像的引用。

來源

2014-06-13 14:50:12

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 –

@SimonMcLoughlin他的問題是「但是什麼是sourceImage？」所以我解釋了它是什麼。 –

如何使用Color-Thief.js？

回答

相關問題