HTML5 연습 설정 이미지를 greyscale_html5 튜토리얼 기술로
- WBOY원래의
- 2016-05-16 15:50:541903검색
과거에는 웹에서 회색조 이미지를 표시하려면 이미지 소프트웨어를 사용하여 수동으로 변환해야 했습니다. 그러나 이제는 이미지 편집 소프트웨어를 사용할 필요 없이 HTML5 캔버스를 사용하여 이 프로세스를 수행할 수 있습니다. 이 기능을 구현하는 방법을 보여주기 위해 html5와 jquery를 사용하여 데모를 만들었습니다.
목적
이 데모에서는 마우스가 이미지 밖으로 이동할 때 HTML5와 jquery를 사용하여 회색조 이미지와 원본 이미지 사이를 전환하는 방법을 보여줍니다. HTML5가 등장하기 전에는 이 기능을 구현하려면 회색조 이미지와 원본 이미지, 총 2개의 이미지를 준비해야 했습니다. 그러나 이제 회색조 이미지가 원본 이미지에 직접 생성되기 때문에 HTML5를 사용하면 더 빠르고 쉽게 이 작업을 수행할 수 있습니다. 파일이나 이미지 표시 기능을 만들 때 이 js 코드가 도움이 되기를 바랍니다.
렌더링 
jquery 코드
다음 jquery 코드는 대상 이미지를 찾아 그레이스케일 버전을 생성합니다. 이미지 위로 마우스를 이동하면 회색조 이미지가 기본 색상으로 변경됩니다.
코드 복사
코드는 다음과 같습니다.