2014-06-13 3 views
-3

저는이 (매우 흥미로운) 스크립트를 가진 초보자입니다. 그리고 그것을 사용하는 방법을 찾으려고합니다.Color-Thief.js를 사용하는 방법?

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

그러나 sourceImage 무엇인가 : 그 GitHub의 사이트에

, 그것은 말한다? 이미지 링크? 이미지의 jQuery 객체 (예 : $ ("img"))? 또는 무엇을?

누군가 코드를 작성하여 코드를 볼 수 있다면 좋을 것입니다.

추신 : 나는 또한 its website의 출처를 보려고했지만, 알아 내지 못했습니다.

+0

플러그인의 소스 코드에서 보면 [Image] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) 인스턴스입니다. –

+0

방금 ​​시도했을 수 ... – ZiNNED

+0

그것이 무엇을보고 그것을 시도 했습니까? 물어보기 전에 실험 해보십시오. –

답변

0

이 예제가 있습니다

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-sectiontarget-image 내부를 검색합니다. 그런 다음 showColorsForImage($targetImage, $imageSection)으로 전화합니다.

colorThief.getColor(image) : showColorsForImage에서

이 라인이있다. 그래서 저는 Frèdéric이 이미 그의 코멘트에서 지적했듯이 이미지 객체라고 확신합니다.

+0

첫 번째 예제는 오래되었거나 잘못되었습니다.'getDominantColor()'는 jQuery 객체가 아닌 DOM 요소를 사용하므로'myImage' 대신'myImage [0]'이 전달되어야합니다. –

+0

예제가 오래된데, 나는 그것을 ("코드는 더 이상 동일하지 않다") 내 대답에 썼다. 첫 번째 줄은 'myImage = $ ('# myImage ')입니다. – link

0

sourceImage은 이미 신고 된 이미지의 참조입니다. author's blog

+0

이 질문에 대한 답을 제공하지 않습니다. 비평하거나 저자의 설명을 요청하려면 게시물 아래에 의견을 남기십시오. 자신의 게시물에 언제나 댓글을 달 수 있으며 충분한 [평판] (http://stackoverflow.com/help/whats-reputation)을 갖게되면 [모든 게시물에 댓글을 달 수] 있어야합니다 (http://stackoverflow.com/help/privileges/comment). –

+0

@SimonMcLoughlin 그의 질문은 "하지만 sourceImage는 무엇입니까?" 그래서 나는 그것이 무엇인지 설명했다. –

관련 문제