jquery 모핑 이미지 효과

Question

저는 이것이 불가능하다고 확신합니다. . .

jquery의 모핑 효과 (예 : 플래시 이미지 회전 장치의 ->http://www.sikids.com)를 얻으려고합니다. 또는 적어도 비슷한 효과가 있습니다. jquery UI에는 모핑 효과가 있지만, 찾지 못했습니다. 이것은 우리 고객에게 중요하기 때문에 가능한 한 가까이에있는 효과는 굉장합니다.

Answer 1

그것은 불가능하지 않지만 ... 느릴 수 있습니다.

캔버스를 사용하여 이미지 데이터를 잡고 변환해야합니다. 더 쉽게 할 수 있도록 SO answer 및 this plugin을 확인하십시오. Internet Explorer에서 해당 플러그인을 사용하지 않았으므로 추가 canvas plugin을 포함해야 할 수 있습니다.

Answer 2

천천히 있지만 캔버스가 필요하지 않은 또 다른 옵션은 1x1 픽셀 이미지를 사용하여 픽셀 화 알고리즘을 작성하는 것입니다.

첫 번째 단계는 이미지를 32 색 팔레트로 축소하는 것입니다.

그런 다음 이미지를 시작 픽셀 수준의 팔레트에 매핑합니다. 예를 들어, 이미지가 100 x 200 픽셀이고 첫 번째 레벨 픽셀이 50 x 100 격자 인 경우 이미지를 색상 팔레트의 배경 이미지가있는 50x100 = 5000, <IMG>으로 바꿉니다.

image1 = [3, 4, 1, 2, ...]; 

이 될 것입니다 :

이

<div id="image1Pixelation"> 
    <img src="image1_3.png" width="2px" height="2px"/> 
    <img src="image1_4.png" width="2px" height="2px"/> 
    <img src="image1_1.png" width="2px" height="2px"/> 
    <img src="image1_2.png" width="2px" height="2px"/> 
    ... 
</div> 

그런 다음 자바 스크립트의 일부를 확대

이는 <IMG>로 변환 될 자바 스크립트 배열로 서버 측을 수행하고 전달해야합니다 <IMG>을 입력하고 일부 정지 배율에 도달 할 때까지 <IMG> 중 일부를 제거하여 눈금을 줄입니다.

그런 다음 높은 배율로 새 이미지로 바꾸고 새 이미지의 알고리즘을 취소하십시오.

Answer 3

MorpherJS이라는 JavaScript 라이브러리가 전적으로 클라이언트 측 JavaScript입니다. MorpherJS의 일부 데모는 here입니다. HTML 캔버스 요소를 사용하여 모핑 이미지 애니메이션을 표시합니다.