자바스크립트 아이드롭퍼(마우스 커서 아래 픽셀 색상 표시)
저는 CMS용 자바스크립트로 마우스 커서가 아래에 있는 픽셀의 16진수 값을 알려주는 "아이드롭퍼" 도구를 찾고 있습니다.
Firefox의 경우 정확히 그렇게 해주는 훌륭한 컬러질라 확장 기능이 있습니다.하지만 FF일 뿐이며, CMS와 함께 툴을 꼭 전달하고 싶습니다.
네덜란드의 한 개발자는 Ajax와 PHP의 조합을 사용하는 매우 영리한 아이디어를 가지고 있습니다.imagecolorat()이미지에서 픽셀 색상을 확인합니다.하지만 이는 제가 서버 측에 접근할 수 있는 이미지의 범위를 제한하며, 저는 정말 보편적인 도구를 꿈꾸고 있습니다.
저는 이러한 접근 방식 중 하나로 작업하겠지만 서버 측의 조작이나 확장 설치가 필요 없는 크로스 브라우저, 자바스크립트 또는 플래시 기반 방식을 훨씬 선호합니다.
저는 ColorZilla가 할 수 있는 모든 IE 특정 솔루션에 관심이 있습니다. 물론 교차 브라우저 솔루션이 이상적이기는 하지만 IE와 FF를 지원하는 것만으로 살 수 있습니다.
자바스크립트는 도메인 간 보안에 어긋나기 때문에 불가능합니다. 않을 입니다.http://some-other-host/yourPassword.png . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Access-Control-Allow-Origin: *머리글). 캔버스의경우, 당신이할것입니다를 하게 됩니다.canvasElement.getContext('2d').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 라이브러리를 사용해 보세요.
또한 IE <9>를 지원할 수 없으며(IE9이 캔버스를 지원한다고 가정할 경우), 문서의 픽셀 데이터를 읽을 수 없기 때문에 플래시를 사용하는 것도 도움이 되지 않습니다.
브라우저 타이밍 공격(Browser Timing Attack)이라는 기술을 사용하면 iframe에서도 픽셀의 색상을 결정할 수 있습니다.
이자체가 합니다(색상 色이 色 色 에 를 SVG 합니다 을 으로 보다는 은 requestAnimationFrame()는 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ setTimeout()). 색상에 걸리거나 걸립니다 현재 픽셀 색상에 따라 필터 적용에 시간이 많이 걸리거나 적게 걸립니다.이렇게 하면 픽셀이 알려진 색상(예: 검은색 또는 흰색)과 동일한 색상인지 확인할 수 있습니다.
이 백서의 자세한 내용(pdf): https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf
참고로, 여기는 브라우저 보안 구멍이지만 브라우저 공급업체가 어떻게 패치를 적용할 수 있는지 알 수 없습니다.
StackOverflow와 다른 사이트의 다양한 참조를 병합하여 javascript와 JQuery를 사용했습니다.
<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>
이것이 제 완전한 해결책입니다.했는데, 이 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ을 사용해야 한다면,<map>이미지상으로도 가능합니다.제가 도와드렸기를 바랍니다.
엘리야가 제시한 아주 상세한 답변에 동의합니다.또한, 이미지에 관해서는 캔버스가 필요하지 않다고 말씀드리고 싶습니다.당신이 말한 것처럼, 당신은 php 내에서 그 이미지들을 이용할 수 있고 서버에서 컬러 쿼리를 할 수 있습니다.
이 문제를 외부 도구로 처리하는 것을 제안합니다. 브라우저에 종속적이지만(OS에 종속됨). 사용자를 위해 색상 쿼리를 수행하고 바로 가기와 함께 호출되어 서버에 색상을 제출하는 작은 도구(예: c#)를 작성합니다.도구를 CMS에서 다운로드할 수 있도록 합니다.
CMS에 사용한 또 다른 방법은 CSS를 구문 분석하여 색을 "스틸"하는 것이었습니다. 사용 사례는 이미 존재하는 웹 사이트의 색을 애플리케이션에 컬러 팔레트로 사용할 수 있도록 하는 것이었습니다.
- 사용자에게 대상 시스템에서 URL을 제공해 달라고 요청했습니다. 대부분 회사 홈페이지입니다.
- 모든 인라인 스타일과 링크된 스타일의 모든 색상 정의를 찾기 위해 페이지를 눌렀습니다.
- (이를 모든 참조 영상으로 쉽게 확장할 수 있습니다.)
- 그 결과는 선택할 수 있는 모든 코퍼레이트 색을 가진 멋진 색 팔레트였습니다.
어쩌면 그것도 당신의 CMS에 대한 해결책이 아닐까요?
새로운 입력[type=color] HTML5 요소 참조 : http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type/index2.html
이제 이것은 적어도 Chrome에서 작동합니다(Ubuntu에서 테스트되었으며 Windows에서도 작동해야 함).운영체제에서 제공하는 색상선택 대화상자를 실행합니다.이 대화 상자에 (Gnome용) 안약이 있는 경우 화면의 모든 지점에서 색상을 선택할 수 있습니다.크로스 브라우저는 아직 없지만 깨끗하고 표준 기반입니다.
크롬 카나리아는 이제 아이드롭퍼 API를 지원합니다!
업데이트: Chrome 95+에서 지원됨
https://www.chromestatus.com/feature/6304275594477568
모든 인기 브라우저에서 곧 기대할 수 있을 것 같습니다.
기본적으로 사용자의 커서를 돋보기로 변경하고 페이지의 픽셀(이미지, 비디오 및 iframe과 함께 작동)을 선택할 수 있습니다.
const eyeDropper = new EyeDropper()
async function useEyeDropper() {
try {
const selectedColor = await eyeDropper.open()
console.log(selectedColor) // { sRGBHex: '#008080' }
} catch (err) {
console.log('eye dropper cancelled')
}
}
someTriggerEl.addEventListener('click', () => {
useEyeDropper();
})
비동기/대기를 잘 이해하지 못하는 경우:
const eyeDropper = new EyeDropper()
someTriggerEl.addEventListener('click', () => {
eyeDropper.open().then(selectedColor => {
console.log(selectedColor) // { sRGBHex: '#008080' }
}).catch(() => {
console.log('eye dropper cancelled')
})
})
이 기능에 대해 너무 흥분했습니다.
페이지가 각 페이지의 브라우저이 는 의 가 로 인 로 의 ?)을 저장한 다음 AJAX를 사용하여 커서 좌표를 서버로 보내고 PHP와 함께 픽셀 색상을 반환할 수 있습니다.imagecolorat().
스크린샷을 촬영하기 위해서는 여기 설명된 것과 같이 셀레늄 IDE를 사용할 수 있습니다.
도움이 되길 바랍니다.
이전 답변에 추가하려면 --
이 문제를 생각하는 한 가지 방법은 1px x 1px 영역의 화면 캡처를 수행할 수 있기를 원하는 것입니다.(예를 들어 웹 기반 버그 보고 시스템 내에서) 화면 영역을 캡처하는 상당히 일반적인 기술은 서명된 Java 애플릿과 java.awt를 사용하는 것입니다.사진을 캡처하는 로봇.애플릿에 서명하면 사용자는 "이 앱을 신뢰하십니까" 대화상자("이 게시자의 앱을 항상 신뢰합니다" 확인란과 함께)를 받게 되며, 그런 다음 도구를 사용할 수 있습니다.
그런 다음 LiveConnect를 사용하여 결과를 JavaScript에 전달하거나(문서가 오래되었지만 Java 애플릿은 여전히 이를 지원함) 서버에 게시할 수 있습니다.마찬가지로 자바스크립트에서 자바 애플릿을 호출할 수 있습니다.
보안 예방책으로 개인 데이터의 스냅샷을 만들 수는 없지만, 개발자가 개인 데이터를 스냅샷으로 만들 수는 없지만 플래시로 픽셀 데이터를 가져올 수는 있습니다. flash.display를 사용하면 플래시 컨테이너 내에서 픽셀 데이터를 얻을 수 있습니다.비트맵 데이터 클래스입니다.
http://www.sephiroth.it/tutorials/flashPHP/print_screen/ 을 확인하세요 -- 플래시 기반 WYSYWIG 프로젝트에서 LAMP(PHP) 서버에 이미지를 저장하는 데 사용했습니다.
플래시를 사용할 때의 문제점은 현재 매우 인기 있고 개발할 가치가 있는 iOS 기기에서 기본적으로 지원되지 않는다는 것입니다.플래시가 튜브를 타고 내려가고 있습니다.
모든 방문자가 캔버스 태그와 자바스크립트를 지원하는 최신 웹 브라우저를 가지고 있다면 캔버스 기반 방법은 분명 좋은 방법이 될 것입니다.
일반적으로 DOM 요소의 색상을 얻을 수 있는 DOM 메서드에 내장되어 있지 않습니다(이미지 또는 A 이외).<canvas>특정 픽셀 위치에 있습니다.
따라서, 이를 위해서는 HTML2Canvas나 DOM Panda와 같은 것을 사용하여 웹사이트의 "스크린샷"을 촬영하고, 사용자의 클릭 위치를 파악하고, 특정 위치의 "스크린샷"의 픽셀 색상을 획득해야 합니다.
HTML2Canvas(버전 0.5.0-beta3)를 사용하면 다음과 같은 작업을 수행할 수 있습니다.
// 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;
데모
이것이 매우 오래된 게시물이라는 것을 알고 있지만 구글 크롬의 새로운 API 호출 기능인 "아이드롭퍼"가 나왔습니다.
이것은 그 블로그에서 가져온 것입니다.
const eyeDropper = new EyeDropper();
try {
const selectedColor = await eyeDropper.open();
console.log(selectedColor);
// logs: { sRGBHex: '#ff0000' }
} catch (err) {
console.log("color selection cancelled");
}
//You can test for support of EyeDropper using the following snippet, if you’re browsing with a browser that supports the EyeDropper API a button will be rendered below the code snippet.
if ("EyeDropper" in window) {
// supported
}
https://pqina.nl/blog/use-the-javascript-eye-dropper-api-to-select-colors-on-the-web/
@Borris에 대해 두 가지 중요한 고려 사항을 추가하고자 합니다.TB의 답변(및 EyeDropper API의 가용성을 지적하는 모든 사람의 답변).
- 우리는 제 기계에서 원활하게 실행되던 프로젝트에 아이드롭퍼 API를 구현하였습니다.
EyeDropper is undefined운영 서버에 설치됩니다.알고 보니 필요한 것은window.isSecureContext = true. 로컬 호스트 및 HTTPS에서만 가능합니다.따라서 API를 사용할 수 있도록 페이지가 HTTPS를 통해 로드되었는지 확인합니다. - 현재 크롬 기반 브라우저에서만 사용할 수 있고 데스크톱에서만 사용할 수 있습니다.Mozilla와 Safari는 이 기능을 지원하지 않으며 보안상의 이유로 지원할 계획이 없습니다.아래 표 https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility 를 참조하시기 바랍니다.
언급URL : https://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor
'source' 카테고리의 다른 글
| URL의 앵커 부분이 웹 서버로 전송되고 있습니까? (0) | 2023.09.14 |
|---|---|
| 워드프레스 블로그에서 MS SQL에서 외부 데이터를 검색하려면 어떻게 해야 합니까? (0) | 2023.09.14 |
| (mysql 또는 펄엔드에서) sql 결과의 빈 날짜를 패드하는 가장 간단한 방법은 무엇입니까? (0) | 2023.09.14 |
| Wordpress 플러그인이 두 번 설치됨 (0) | 2023.09.14 |
| 통화 최적화를 위한 최적화 (0) | 2023.09.14 |