자바 스크립트 스포이드 (마우스 커서 아래 픽셀의 TELL 컬러)

해결법

1.이 도메인 간 보안에 간다 그것은 자바 스크립트와 수 없습니다. //some-other-host/yourPassword.png : 당신은 픽셀 이미지, HTTP를 만들 었는지 알고 있다면 그것은 아주 나쁜 것입니다. 마우스 하나가 캔버스 또는 동일한 도메인의 이미지 요소 (또는 액세스 제어 - 허용 - 원산지와 함께 제공됩니다 다른 도메인의 이미지 요소 위에있는 경우에만 마우스 아래에있는 픽셀의 색상을 알 수 있습니다 : * 헤더). 캔버스의 경우에는 ( '2D') canvasElement.getContext 할 것입니다. getImageData (X, Y, 1, 1) .DATA합니다. 이미지의 경우, 당신은으로 캔버스에 그리는해야합니다 :

이 도메인 간 보안에 간다 그것은 자바 스크립트와 수 없습니다. //some-other-host/yourPassword.png : 당신은 픽셀 이미지, HTTP를 만들 었는지 알고 있다면 그것은 아주 나쁜 것입니다. 마우스 하나가 캔버스 또는 동일한 도메인의 이미지 요소 (또는 액세스 제어 - 허용 - 원산지와 함께 제공됩니다 다른 도메인의 이미지 요소 위에있는 경우에만 마우스 아래에있는 픽셀의 색상을 알 수 있습니다 : * 헤더). 캔버스의 경우에는 ( '2D') canvasElement.getContext 할 것입니다. getImageData (X, Y, 1, 1) .DATA합니다. 이미지의 경우, 당신은으로 캔버스에 그리는해야합니다 :
```
var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
```
그리고 단지 캔버스에 대한 설명은 이전 방법을 사용합니다. 당신이 색상 값의 다양한 표현으로 변환 할 수 있어야합니다, 내 color.js 라이브러리를 사용해보십시오.

이 문서 중 하나의 픽셀 데이터를 읽을 수 없기 때문에 또한, 당신은 결코 도움이되지 않습니다 (IE9가 캔버스를 지원하는 가정 것) IE <9을 지원 할 수 있도록 않을 및 Flash를 사용하고 있습니다.
2.브라우저 타이밍 공격이라는 기술을 사용하여, 심지어는 iframe을에, 모든 픽셀의 색상을 결정 (종류의) 할 수 있습니다.

브라우저 타이밍 공격이라는 기술을 사용하여, 심지어는 iframe을에, 모든 픽셀의 색상을 결정 (종류의) 할 수 있습니다.

기본적으로,이 기술을 측정 요소에 SVG 필터보다는 색상 자체 렌더링 시간 (requestAnimationFrame는 ()의 setTimeout보다 훨씬 더 정확하게 시간을 측정 할 수 있습니다 ()). 현재 픽셀의 색상에 따라, 필터는 다소 시간에 적용하는 데 걸리는. 인스턴스 검정색 또는 흰색 대 - 이것은 화소 알려진 색과 동일한 색인지 판정 할 수있다.

이 백서에서 자세한 내용 (PDF) : https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf

그런데 : 예, 이것은 브라우저의 보안 구멍이지만, 나는 브라우저 벤더가 패치하는 방법을 볼 수 없습니다.

3.병합 다양한 참조는 내가 그렇게 자바 스크립트와 jQuery를 사용 않았고,에 StackOverflow에 다른 사이트에서 여기 :

병합 다양한 참조는 내가 그렇게 자바 스크립트와 jQuery를 사용 않았고,에 StackOverflow에 다른 사이트에서 여기 :

<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    return undefined;
    }

    function rgbToHex(r, g, b){
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
    }

$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>

이것은 당신이 사용해야 할 경우 I는 사용 캔버스와 하나 개의 이미지 만, <지도> 이미지 위에, 너무 가능 .. 여기 내 완벽한 솔루션입니다. 내가 도움이되기를 바랍니다.

4.내가 할 엘리야가 제공하는 매우 상세한 답변에 동의합니다. 또한, 나는 그것이 이미지에 관해서 캔버스를 필요로하지 않는다는 것을 말할 것입니다. 당신이 자신을 언급 한 바와 같이, 당신은 PHP 내에서 해당 이미지를 사용할 수 있고 서버의 컬러 쿼리를 할 수 있습니다.

내가 할 엘리야가 제공하는 매우 상세한 답변에 동의합니다. 또한, 나는 그것이 이미지에 관해서 캔버스를 필요로하지 않는다는 것을 말할 것입니다. 당신이 자신을 언급 한 바와 같이, 당신은 PHP 내에서 해당 이미지를 사용할 수 있고 서버의 컬러 쿼리를 할 수 있습니다.

난 당신이 외부 도구를 사용하여이 문제를 처리 할 것을 제안 -이 그것도 브라우저에 의존하지 (그러나 OS에 따라 다름)한다 : (C #에서 예를 들면) 작은 도구를 쓰기 당신을 위해 색상 쿼리를 수행, 바로 가기 및 제출하기로 호출을 서버에 대한 색상. 당신의 CMS에 다운로드 할 도구를 사용할 수 있도록합니다.

유스 케이스 내 응용 프로그램에 컬러 팔레트로 사용할 이미 존재하는 웹 사이트의 색상을 만드는 것이 었습니다 : 나는 CMS에 사용되는 또 다른 aproach는에 CSS를 구문 분석하여 색상을 "훔쳐"했다 :

어쩌면 그 또한 CMS에 대한 해결책인가?
5.새로운 입력 [TYPE = 컬러] HTML5 요소 참조 : http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type /index2.html.

새로운 입력 [TYPE = 컬러] HTML5 요소 참조 : http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type /index2.html.

지금은 크롬에서 적어도 작동 (우분투에서 테스트도 Windows 용 작동합니다). 그것은 운영 체제에서 제공하는 색상 선택 대화 상자를 실행합니다. 이 대화 상자에서 스포이드가 (이 그놈입니다)가 있다면, 그것은 화면의 어느 지점에서 색상을 선택하는 것이 가능하다. 아니 크로스 브라우저 아직하지만, 깨끗하고 표준 기반.
6.이 가능한 경우는 모르겠지만, 페이지가 정적 경우는 이미지 그들 각자의 스크린 샷을 절약 할 수있다 (각 브라우저 / 화면 해상도 또는 어쩌면 하나?) 다음에 커서 좌표를 보낼 AJAX를 사용 서버와 PHP의 imagecolorat으로 픽셀 색상을 반환 ().

이 가능한 경우는 모르겠지만, 페이지가 정적 경우는 이미지 그들 각자의 스크린 샷을 절약 할 수있다 (각 브라우저 / 화면 해상도 또는 어쩌면 하나?) 다음에 커서 좌표를 보낼 AJAX를 사용 서버와 PHP의 imagecolorat으로 픽셀 색상을 반환 ().

여기에 설명 된 것처럼 스크린 샷을 촬영하려면, 당신은 셀레늄 IDE 사용할 수 있습니다.

희망이 도움이.
7.이전 답변에 추가하려면 -

이전 답변에 추가하려면 -

이 문제를 생각하는 한 가지 방법은 당신이 1 픽셀의 지역에 1 픽셀의 화면 캡처를 할 수 있기를 원하는 것입니다. (웹 기반 버그보고 시스템 내에서 예를 들어) 화면 영역을 캡처 매우 일반적인 기술은 사진을 캡처하는 서명 된 Java 애플릿 및 java.awt.Robot을 사용하는 것입니다. 애플릿에 서명하는 경우, 사용자는 (체크 박스에 "이 게시자를 항상 신뢰 응용 프로그램"과)는 "이 응용 프로그램을 신뢰하지"대화 상자를 얻을 것이다 다음 도구를 사용할 수 있습니다.

그런 다음 (워드 프로세서 오래된,하지만 자바는 여전히 애플릿이 기능을 지원)는 LiveConnect를 사용하여 자바 스크립트에 결과를 전달할 수 있습니다, 또는 당신은 당신의 서버에 게시 할 수 있습니다. 마찬가지로, 당신은 자바 스크립트에서 자바 애플릿으로 호출 할 수 있습니다.
8.(개발자는 귀하의 개인 데이터의 스냅 샷을 할 수 있도록),하지만 당신은 플래시에서 할 수있는 보안 조치로 당신이 할 수없는 자바 스크립트와 캡처 화면 픽셀 - 당신은 flash.display를 사용하여 플래시 컨테이너 내에서 픽셀 데이터를 얻을 수 있습니다 .BitmapData 클래스입니다.

(개발자는 귀하의 개인 데이터의 스냅 샷을 할 수 있도록),하지만 당신은 플래시에서 할 수있는 보안 조치로 당신이 할 수없는 자바 스크립트와 캡처 화면 픽셀 - 당신은 flash.display를 사용하여 플래시 컨테이너 내에서 픽셀 데이터를 얻을 수 있습니다 .BitmapData 클래스입니다.

http://www.sephiroth.it/tutorials/flashPHP/print_screen/ 체크 아웃 - 나는 LAMP (PHP) 서버에 이미지를 저장하는 플래시 기반 WYSYWIG 프로젝트에 사용했습니다.

플래시를 사용의 문제는 기본적으로 매우 지금 인기와 가치에 대한 개발의 iOS 장치에서 지원되지 않는 것입니다. 플래시 튜브 내려오고있다.

캔버스 기반의 방법은 확실히 좋은 방문자의 모든 캔버스 태그와 자바 스크립트를 지원하는 최신 웹 브라우저가 제공 될 것입니다.

9.더 일반적으로 특정 픽셀 위치 (이미지 또는

더 일반적으로 특정 픽셀 위치 (이미지 또는

따라서,이 작업을 수행하기 위해, 우리는 우리의 웹 사이트의 "스크린 샷"을 가지고 사용자의 클릭 위치를 확인하고 특정 위치에서 "스크린 샷"의 픽셀 색상을 얻을 수 HTML2Canvas 또는 DOM 팬더 같은 것을 사용해야합니다.

사용 HTML2Canvas (버전 0.5.0 - 베타 3)이 같은 작업을 수행 할 수 있습니다 :

// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
    screenshotCtx,
    timeBetweenRuns = 10,
    lastTime = Date.now();
function getScreenshot() {
    // Limit how soon this can be ran again
    var currTime = Date.now();
    if(currTime - lastTime > timeBetweenRuns) {
        html2canvas(document.body).then(function(canvas) {
            screenshotCanvas = canvas;
            screenshotCtx = screenshotCanvas.getContext('2d');
        });
        lastTime = currTime;
    }
}
setTimeout(function() { // Assure the initial capture is done
    getScreenshot();
}, 100);

// Get the user's click location
document.onclick = function(event) {
    var x = event.pageX,
        y = event.pageY;

    // Look what color the pixel at the screenshot is
    console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}


// Update the screenshot when the window changes size
window.onresize = getScreenshot;

from https://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 $ 아약스 POST에 매개 변수를 전달하는 방법? (0)	2020.10.26
[JQUERY] 클래스와 가장 가까운 이전 형제를 찾을 수 JQuery와 (0)	2020.10.26
[JQUERY] 알파벳 순으로 jQuery를 사용하여 옵션의 요소를 정렬 (0)	2020.10.25
[JQUERY] jQuery를 사용하면 다른 하나 개의 태그를 대체하는 (0)	2020.10.25
[JQUERY] 캐치되지 않는 오류 : SECURITY_ERR : 내가 쿠키를 설정하려고 DOM 예외 (18) (0)	2020.10.25

복붙노트

[JQUERY] 자바 스크립트 스포이드 (마우스 커서 아래 픽셀의 TELL 컬러)

자바 스크립트 스포이드 (마우스 커서 아래 픽셀의 TELL 컬러)

해결법

2.브라우저 타이밍 공격이라는 기술을 사용하여, 심지어는 iframe을에, 모든 픽셀의 색상을 결정 (종류의) 할 수 있습니다.

3.병합 다양한 참조는 내가 그렇게 자바 스크립트와 jQuery를 사용 않았고,에 StackOverflow에 다른 사이트에서 여기 :

5.새로운 입력 [TYPE = 컬러] HTML5 요소 참조 : http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type /index2.html.

7.이전 답변에 추가하려면 -

9.더 일반적으로 특정 픽셀 위치 (이미지 또는

'JQUERY' 카테고리의 다른 글

티스토리툴바

자바 스크립트 스포이드 (마우스 커서 아래 픽셀의 TELL 컬러)

해결법

2.브라우저 타이밍 공격이라는 기술을 사용하여, 심지어는 iframe을에, 모든 픽셀의 색상을 결정 (종류의) 할 수 있습니다.

3.병합 다양한 참조는 내가 그렇게 자바 스크립트와 jQuery를 사용 않았고,에 StackOverflow에 다른 사이트에서 여기 :

5.새로운 입력 [TYPE = 컬러] HTML5 요소 참조 : http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type /index2.html.

7.이전 답변에 추가하려면 -

9.더 일반적으로 특정 픽셀 위치 (이미지 또는 를 제외) DOM 요소의 색상을 얻기 위해 DOM의 방법이 내장되지 않습니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

9.더 일반적으로 특정 픽셀 위치 (이미지 또는