Javascript - 캔버스 요소 아래 이미지에서 픽셀 데이터 가져 오기?

getImageData()를 사용하여 캔버스 이미지의 픽셀 색상 데이터를 샘플링 할 수 있습니다. 투명 캔버스 요소를 배경 이미지 나 플래시 동영상 위에 레이어하면 캔버스 태그를 통해 색상을 샘플링 할 수 있습니까?Javascript - 캔버스 요소 아래 이미지에서 픽셀 데이터 가져 오기?

출처

2009-03-25 Geuis

이 질문은 아마도 관련이 있습니다 (그리고 저는 같은 문제를 해결하려고합니다) : http://stackoverflow.com/questions/2754865/how-to-get-the-rgb-value-of-an-image -in-a-page-using-javascript –

필의 말이 맞습니다. 할 수 없습니다. Canvas는 의도적으로 고유 한 픽셀 데이터 만 반환하며 다른 요소에서 온 화면 렌더링 된 내용은 반환하지 않습니다.

전체 페이지를 다루는 캔버스 요소를 만들 수 있으며 렌더링 된 화면의 이미지를 캡처 할 수 있습니다.

가능한 경우 크로스 사이트 스크립팅 보안 홀이됩니다. 목표 사이트 (사용자 쿠키/인증/인트라넷을 활용하여 액세스)를 iframe에 표시 한 다음 픽셀 단위로 콘텐츠를 빨아 들일 수 있습니다.

출처

2009-03-25 14:21:20 bobince

아니겠습니까? 그 시점에서 캔버스의 색을 얻을 수 있습니다. 나는 document.defaultview.getComputedStyle(element,pseudoElt) 메서드를 찾았지만 배경색이없는 1 픽셀 div에서는 '투명'을 반환했습니다.

따라서 불행히도 현재로서는 불가능할 수 있습니다. 당신의 고차원 목표는 무엇입니까? 우리는 대체 경로를 찾을 수 있습니다.

"이전에 이미지 데이터를 자바 스크립트 객체에 복사하는 방법에 대한 아이디어가있었습니다. 전체 페이지를 포함하고 렌더링 된 화면의 이미지를 캡처하는 캔버스 요소를 만들 수있었습니다. 데이터가 있으면, 세계 크로스 브라우저 테스트, 아마도. "

정적 인 이미지라면 괜찮습니다. Browser Shots을 사용하면 멋진 이미지를 얻을 수 있습니다. 그것은 다른 브라우저의 거대한 범위에서 실행중인 귀하의 웹 사이트의 스크린 샷을 생성합니다.

출처

2009-03-25 10:33:41

나는 이전에 이미지 데이터를 자바 스크립트 객체에 복사하는 아이디어를 가지고있었습니다. 전체 페이지를 덮고 렌더링 된 화면의 이미지를 캡처하는 캔바스 요소를 만들 수 있습니다. 이 데이터를 얻은 후에는 실제 크로스 브라우저 테스트를 수행 할 수 있습니다. – Geuis

나는 browsershots 웹 사이트에 대한 답변에 메모를 추가했는데, 이는 멋진, 간단한 방식으로 생각하고있는 것을 수행해야합니다. –

Javascript - 캔버스 요소 아래 이미지에서 픽셀 데이터 가져 오기?

답변

관련 문제