HTML5 연습 - 이미지 설정으로 회색체

댓글 : 과거에는 웹에 그레이 스케일 이미지를 표시하려면 사진 소프트웨어를 수동으로 만 사용하여 변환 할 수 있습니다. 그러나 이제이 프로세스는 이미지 편집 소프트웨어를 사용할 필요없이 HTML5 캔버스의 도움으로 달성 할 수 있습니다.

목적

이 데모는 HTML5 및 JQuery를 사용하여 이미지의 마우스를 움직일 때 그레이 스케일 이미지와 원본 이미지를 전환하는 방법을 보여줍니다. HTML5가 나타나기 전에이 함수를 구현하려면 두 개의 사진을 준비해야합니다. 하나는 그레이 스케일 그림과 하나의 원본 사진을 준비해야합니다. 그러나 Grayscale 이미지가 원본 이미지에서 직접 생성되기 때문에 HTML5를 사용하면 더 빠르고 쉽게 달성 할 수 있습니다. 파일 또는 그림 디스플레이 기능을 만들 때이 JS 코드가 도움이되기를 바랍니다.

복제 다이어그램

jQuery 코드

다음 jQuery 코드는 대상 이미지를 찾고 그레이 스케일 버전을 생성합니다. 마우스를 사진으로 옮기면 그레이 스케일 사진이 기본 색상으로 바뀝니다.

<script src = "jquery.min.js"type = "text/javaScript"> </script>

<script type = "text/javaScript">

// 실행하기 전에 모든 사진을로드 할 때까지 Window Load 이벤트를 설정합니다.

$ (Window) .load (function () {

// 색상의 원본 이미지가 표시되지 않도록 그림을 점차적으로 입력 한 다음 Window Load 이벤트를 실행하십시오.

$ ( ". 항목 img"). Fadein (500);

// 사진을 복사하십시오

$ ( '. item img'). 각 (function () {

var el = $ (this);

el.css ({ "위치": "절대"}). 랩 ( "<div>"). clone (). addClass ( 'img_grayscale'). css ({ "위치": "절대", "z-index": "998", "불투명": "0"}).

var el = $ (this);

el.parent (). css ({ "width": this.width, "height": this.height});

el.dequeue ();

});

this.src = grayscale (this.src);

});

// 사진을 서서히 입력하십시오

$ ( '. item img'). 마우스 오버 (function () {

.

})

$ ( '. img_grayscale'). 마우스 아웃 (function () {

$ (this) .stop (). 애니메이션 ({불투명도 : 0}, 1000);

});

});

// 캔버스로 회색 사진을 만듭니다

기능 그레이 스케일 (SRC) {

var canvas = document.createElement ( 'canvas');

var ctx = canvas.getContext ( '2d');

var imgobj = new Image ();

imgobj.src = src;

canvas.width = imgobj.width;

canvas.height = imgobj.height;

ctx.DrawImage (imgobj, 0, 0);

var imgpixels = ctx.getImageData (0, 0, canvas.width, canvas.height);

for (var y = 0; y <imgpixels.height; y ++) {

for (var x = 0; x <imgpixels.width; x ++) {

var i = (y * 4) * imgpixels.width + x * 4;

var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;

imgpixels.data [i] = avg;

imgpixels.data [i + 1] = avg;

imgpixels.data [i + 2] = avg;

}

}

ctx.putImagedata (imgpixels, 0, 0, 0, imgpixels.width, imgpixels.height);

반환 canvas.todataurl ();

}

</스크립트>

사용 방법

아래 단계를 따르십시오.

인용 jquery.js

위의 코드를 복사하십시오

대상 이미지를 설정합니다 (예 : .post-img, img, .gallery img 등).

애니메이션의 속도를 설정할 수도 있습니다 (예 : 1000 = 1 초)

호환성

Chrome, Safari 및 Firefox와 같은 HTML5 및 캔버스를 지원하는 모든 브라우저를 시도했습니다. HTML5를 지원하지 않는 브라우저 인 경우 원본 이미지 만 사용하며 그레이 스케일 이미지를 생성하지 않습니다.

참고 : 로컬 HTML 파일이 Firefox 및 Chrome에서 실행할 수없는 경우 HTML 파일을 서버에 배포해야합니다.

자기 연습

나는 튜토리얼에 따라 직접 테스트했으며주의를 기울여야 할 것들을 발견했습니다. Firefox로 페이지를 열었습니다. 프로그램은 올바르게 실행될 수 없지만 관련 코드를 서버에 배포 한 후에 실행될 수 있습니다.

로컬 이미지임을 보장해야합니다. 그렇지 않으면 보안 오류를보고해야합니다.

이것은 다음과 같습니다.

캔버스는 HTML5 표준의 캔버스 요소이며 2D 및 3D 이미지를 그리는 데 사용할 수 있습니다.

그러나 디버깅 중에 보안 오류 문제를 쉽게 만날 수 있습니다.

현재 디버깅 중에 발생한 보안 오류는 주로 Todataurl () 및 SRC에 나타납니다.

보안 오류는이 코드에 의미 론적 문제가 없지만 보안상의 이유로 인해 일반적으로 실행할 수는 없습니다.

투척 보안 오류 상황 :

캔버스에서 크로스 도메인 이미지 사용

로컬 서버리스 환경에서 디버깅

현재 영역과 이미지 사이의 관계를 얻을 수 없습니다.

StackoverFlow에서 발견 된 일부 솔루션은 일반적으로 크로스 도메인 문제를 해결할 수 있습니다.

그러나 실제로 로컬 디버깅 중에 서버 소프트웨어를 사용하지 않으면이 문제가 발생합니다.

예를 들어 : Todataurl 함수는 로컬 디버깅 중에 사용되며 로컬 이미지 파일은 캔버스에 사용됩니다. Chrome 및 Firefox에서는 보안 오류가 여전히 발생합니다.

일반적인 솔루션은 서버 환경을 로컬로 설정하거나 디버깅을 위해 컨텐츠를 서버에 제출하는 것입니다.