HTML 이미지 요소를 동적으로 픽셀 화합니다
https://stackoverflow.com/questions/2471226
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
웹 페이지에서 이미지를 찍은 다음 JavaScript (또는 가장 적합한 것은 무엇이든)를 사용하여 동적으로 'Pixelate'(예 : 20px 사각형으로)를 사용해야합니다. 그런 다음 사용자가 페이지를 아래로 스크롤하면 더 이상 픽셀 화되지 않을 때까지 해상도가 점차 증가하려면 이미지가 필요합니다.
내가이 일을 어떻게 할 수 있는지 아이디어가 있습니까? PHP를 사용하여 이미지를 조정하고 여러 번 이미지를 바꾸고 이미지를 전환 할 수 있지만 추가 이미지를 여러 번로드해야합니다. 또한 Flash & Pixelbender로 효과를 발휘할 수 있다는 것을 알고 있지만 가능한 경우 HTML5, CSS 및 JavaScript의 한계 내에서이를 달성하고 싶습니다.
어떤 생각이든 감사합니다!
업데이트 : 이와 같은 것이 있지만 플래시 대신 JavaScript가 있습니까? http://www.reflektions.com/miniml/template_permalink.asp?id=390
해결책
당신은 그림을 숨겨진 상태로 만들 수 있습니다 <canvas> 요소. 그런 다음 여기에 설명 된 기술의 파생을 사용하십시오 http://dev.opera.com/articles/view/html-5-canvas-bas-basics/#pixelbasedmanipulation . 1 초 안에 이미지의 픽셀 화 된 버전을 만들려면 <canvas> 항상 감소하는 요소 fillRect's. 이렇게하면 원천 이미지 데이터를 버퍼링합니다.
편집하다: 나는 2를 사용할 것이다 <canvas> 원본 이미지를 한 번만 가져오고 그려야하는 요소. 아마도이 이미지를 동일하게 버퍼/캐시 할 수 있습니다. <canvas> 요소이지만보기 포트 외부에 그려서 이것이 가능한지 확실하지 않습니다.
다른 팁
픽셀의 너비를 제곱 너비로 나눈 다음 높이를 제곱 높이로 나눈 계산을 사용합니다. 이것은 당신이 찾고있는 더 낮은 해상도를 줄 것입니다.
그런 다음 해상도를 결과로 변경하거나 찾고있는 사각형의 위치 (높이 및 너비)/2에서 모든 픽셀의 색상을 잡는 방법을 찾을 수 있습니다. 그런 다음 적절한 색상과 크기로 div 태그 또는 테이블로 생성하여 결국 이미지가 자체적으로 생성됩니다.
여러 버전의 이미지를 가질 수 있고 스크롤 할 때 z-index 또는 가시성을 변경할 수있는 곳이 더 빠릅니다. 기본적으로 각 이미지는 다른 해상도를 갖습니다. 많은 이미지에 그렇게해야한다면이 솔루션은 이미지 편집이 많을수록 효율적이지 않지만 항상 배치 편집을 할 수 있습니다.
더 많은 아이디어를 생각할 수 있는지 보자. 편집 할 것이다.
휴대용 방식이 아닙니다.
그것은 플래시에서 가능할 수 있습니다. Firefox JS 확장은 JS 배열, Base64 문자열 등으로 이미지를 읽을 수 있습니다. "1 div = 1 픽셀"해킹을 실험 할 수 있지만 합리적인 속도로 합리적인 크기의 이미지를 얻기가 어렵습니다. 정말 과장된 느낌이라면 데이터를 사용하여 Base64 인코딩 된 이미지를 즉시 만들 수 있습니다. URI ... 많은 방법이지만 좋은 ...
