이번에는 흑백 JS 작업 사진을 가져오겠습니다. JS 작업 사진을 흑백으로 변환할 때의 주의사항은 무엇인가요?
HTML5에는 js를 통해
먼저 렌더링을 살펴보겠습니다
왼쪽이 img 태그이고 오른쪽이 캔버스 요소 태그입니다. 구조는 다음과 같습니다
<img src="1.jpg" style="width: 200px; height: 199px"/> <canvas id="drawing" width="200" height="199" ></canvas>
JS 코드는 매우 간단합니다. 20줄이 넘지만, 낚시하는 법을 가르쳐준다는 취지에서, 소스코드는 맨 아래에 올려두겠습니다.
1. 사진에 대하여
소위 사진은 픽셀로 구성된다는 사실, 즉 300*300 사진은 총 300*300 픽셀로 이루어져 있으며 각 픽셀은 포인트로 구성되어 있다는 사실은 누구나 알아야 합니다. 세 가지 기본 색상(빨간색, 녹색, 파란색)과 투명도(알파)입니다. 따라서 이미지의 이미지 데이터를 변경하려면 실제로 이미지의 각 픽셀 데이터를 변경해야 합니다.
2. API 소개
var Drawing = <a href="http://www.php.cn/code/658.html" target="_blank">document<code>var drawing = <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById('drawing')
; 这个方法可以拿到 canvas对象,canvas对象提供了 2D、3D两种绘图方式,这里我们使用2D绘图
使用 context2d = drawing.getContext('2d');
方法获得context2d对象。拿到context2d对象之后,我们通过context2d提供的方法getImageData(),来获取图像数据,getImageData()有4个参数,分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height);
.getElementById( '드로잉'); 이 메소드는 캔버스 객체를 가져올 수 있습니다. 캔버스 객체는 2D 및 3D의 두 가지 그리기 메소드를 제공합니다. 여기서는 2D 그리기를 사용합니다.
context2d = Drawing.getContext('2d');
context2d 객체를 얻는 방법. context2d 객체를 얻은 후 context2d에서 제공하는 getImageData() 메소드를 통해 이미지 데이터를 얻습니다. getImageData()에는 각각 화면 영역의 x 및 y 좌표와 영역의 픽셀 너비 및 높이를 나타내는 4개의 매개변수가 있습니다. code> var imagedata = context2d.getImageData(0, 0, image.width, image.height)
ImageData 개체에는 너비, 높이 및 data라는 세 가지 속성이 있습니다. 데이터 속성은 이미지의 각 픽셀 데이터를 저장하는 배열
function drawImageData () { var context2d = null; if(drawing.getContext) { context2d = drawing.getContext('2d'); } if (context2d == null) { return; } var image = document.images[0]; context2d.drawImage(image, 0 , 0); var imagedata = context2d.getImageData(0, 0, image.width, image.height); var data = imagedata.data; console.log('data: ' + data); var i,len,red,green,blue,alpha,average; for (i = 0 , len = data.length; i < len; i+=4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; average = Math.floor((red + green + blue) / 3); data[i] = average; data[i+1] = average; data[i+2] = average; } imagedata.data = data; context2d.putImageData(imagedata, 0, 0); }이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서: 🎜
위 내용은 JS 작업 사진 흑백의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!