>source

이미지의 흑백 버전을 그리는 캔버스용 필터를 만들려고 합니다. 이미지를 그린 다음 이미지 데이터를 반복하고 rgb 값을 회색으로 변경한 다음 그런 다음이미지 데이터를 캔버스에 배치합니다. RGB 값에서 회색 음영을 만드는 방법에 대한 도움이 필요합니다.

내 code:

function toGray(vals) {
  var r= vals[0]
  var g= vals[1]
  var b= vals[2]
  //Return gray shade
}
function filter() {
  var c= document.getElementById("canvas1");
  var ctx= c.getContext("2d");
  var img= document.createElement('img')
  img.src= 'shaq.png'
  img.onload= function() {
    ctx.drawImage(img, 0, 0, c.width, c.height);
    var imgData= ctx.getImageData(0, 0, c.width, c.height);
    var i;
    for (i= 0; i < imgData.data.length; i += 4) {
      var rgblist= [imgData.data[i], imgData.data[i+1], imgData.data[i+2]]
      var filtered= toGray(rgblist)
      imgData.data[i]= filtered[0]
      imgData.data[i+1]= filtered[1]
      imgData.data[i+2]= filtered[2]
    }
    ctx.putImageData(imgData, 0, 0);
  }
}

canvas {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100vw;
  height: 100vh;
}

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>filter</title>    <link href="style.css" rel="stylesheet" type="text/css" />  </head>  <body>    <canvas id="canvas1"></canvas>    <script src="codes.js"></script>    <script src="filter.js"></script>    <script src="script.js"></script>  </body></html>

이것이 귀하의 질문에 대한 답변입니까? RGB를 회색조/강도로 변환

Sean2022-02-06 17:03:13
  • 이전 java : UNAUTHORIZED_DOMAIN:Domain이 프로젝트에서 허용되지 않는 이유는 무엇입니까?
  • 다음 html : Tailwind로 svg 아이콘 색상을 수정하는 방법