캔버스는 정말 마법 같은 것입니다. 다양한 그래픽, 텍스트, 비트맵을 그릴 수 있을 뿐만 아니라 비트맵에서 복잡한 픽셀 작업과 처리도 수행할 수 있습니다. 따라서 실제로 필터와 같은 것들은 Canvas를 사용하여 구현할 수 있습니다. 다음은 기적을 목격할 차례이다.
먼저 Canvas 컨테이너가 필요합니다. 예를 들면 다음과 같습니다.
<canvas id=myCanvas width=800 height=800></canvas>
다음으로 Canvas를 사용하여 그림을 그려야 합니다.
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// 자신만의 이미지 링크 준비 img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//첫 번째 800은 그려진 그림의 너비를 나타내고 두 번째 800은 그려진 그림의 높이를 나타냅니다.}캔버스 첫 드로잉의 효과
다음 단계는 이미지의 픽셀에 대해 몇 가지 작업을 수행하는 것입니다. 이러한 작업을 구현하려면 먼저 Canvas에서 이미지의 픽셀 정보를 얻어야 하며, 이 정보는 getImageData() 통해 얻을 수 있습니다.
// ... 이전 코드 생략 img.onload = (e) => {// ... 이전 코드 생략 img = ctx.getImageData(0, 0, 800, 800) // 각각의 색상을 구합니다. 픽셀 바이트 데이터}사진의 크기가 800*800이므로 각 픽셀의 빨간색, 녹색, 파란색 값을 얻으려면 픽셀을 순회해야 합니다. 그러므로:
// ... 이전 코드 생략 img.onload = (e) => {// ... 이전 코드 생략 var pixelLen = 800 * 800; // 픽셀 수 가져오기 for(var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // 첫 번째 바이트 단위는 빨간색을 나타냅니다. greenC = img.data[i + 1], // 두 번째 바이트 단위는 녹색을 나타냅니다. = img.data[i + 2], // 세 번째 바이트 단위는 파란색을 나타냅니다. alpha = img.data[i + 3] // 네 번째 바이트 단위는 투명도를 나타냅니다.}}위의 루프를 통해 이미지 데이터에 포함된 각 픽셀의 특정 색상 값을 얻습니다. 한 가지 주목해야 할 점은 각 픽셀의 데이터가 1비트가 아니라 각각 빨간색, 녹색, 색상을 나타내는 4개의 인접한 비트라는 것입니다. 파란색, 포인트의 투명도 값입니다. 따라서 실제로 비트맵 바이트 데이터의 배열 길이는 픽셀 수에 4를 곱한 것과 같습니다. for 루프에서는 이 기능도 그에 따라 처리합니다.
각 점의 빨간색, 녹색, 파란색 값을 평균한 다음 생성된 평균값을 픽셀의 빨간색, 녹색, 파란색 값에 할당하면 최종적으로 putImageData() 메소드를 사용하여 다시 그림을 그립니다. 코드는 다음과 같습니다.
// ... 이전 코드 생략 img.onload = (e) => { // ... 이전 코드 생략 for(var i = 0; i < pixelLen * 4; i += 4) { // . .. 이전 코드 생략 var grey =parseInt((redC + greenC + blueC) / 3) // 평균화 후 회색 값을 구합니다. img.data[i] = grey; // 빨간색 값을 변경합니다. + 1] = grey; // 녹색 값 변경 img.data[i + 2] = grey; // 파란색 값 변경} ctx.putImageData(img, 0, 0, 800, 800);이때 아래와 같이 그레이스케일 효과가 형성됩니다.
캔버스가 두 번째로 그림을 그립니다 - 회색조 효과
투명도를 제어하려면 네 번째 바이트 단위에 해당하는 값만 수정하면 됩니다. 값 범위는 0~256이며, 0은 완전한 투명도를 나타내고, 256은 완전한 불투명도를 나타냅니다. 예를 들어:
// ... 이전 코드 생략 img.onload = (e) => { // ... 이전 코드 생략 for(var i = 0; i < pixelLen * 4; i += 4) { // . .. 이전 코드 생략 img.data[i + 3] = 128; // 투명도 50% } // ... 이전 코드 생략 }캔버스 3차 그리기 효과 - 투명도 증가
여기에서 사진의 각 픽셀에 대해 4개의 데이터 값을 제어하면 필터 효과를 얻을 수 있습니다. 참 쉽죠?
참고자료:
Liu Huan이 편집한 "HTML5 기본 지식, 핵심 기술 및 최첨단 사례"
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.