canvas渲染图片怎么调成灰阶

解决方法：第一步canvas获取图片的像素。第二步灰度计算公式修改像素。第三步修改后的像素重新渲染canvas

2.效果图

3.实现步骤

• 获取canvas对象和canvas上下文对象。

    var canvas = document.getElementById('myCanvas')
      var cxt = canvas.getContext('2d')
      var img = new Image()
      img.src = $('#img').attr('src');
      img.onload = function () {//图片加载完成后，canvas才渲染图片
          var width = img.width;//获取图片真实宽
          var height = img.height;//获取图片真实高
          $('#myCanvas').attr('width', width);//设置canvas的宽
          $('#myCanvas').attr('height', height);//设置canvas的高
          cxt.drawImage(this, 0, 0,width,height);//canvas绘制图片
      }

• 获取图像像素数据，根据灰阶公式计算，在重新渲染canvas。

    $scope.canvasHui=function () {
              var pixels =  cxt.getImageData(0,0,img.width,img.height)
              var pixeldata = pixels.data;//图片像素数组，每4组代表一个像素rgba
              for(var i=0,len = pixeldata.length;i<len;i+=4){
                  var gray =parseInt( pixels.data[i]*0.1687 + pixels.data[i+1] *0.3313 + pixels.data[i+2]*0.5);//比较合理灰度计算公式
                  pixels.data[i] = gray;//r
                  pixels.data[i+1] = gray;//g
                  pixels.data[i+2] = gray;//b
              }
              cxt.putImageData(pixels,0,0)//重新渲染
          }