微信小程序图片使用滤镜工具weImageFilters使用记录

 哎~~~~~~这是一个没有尽头的小程序项目，要做什么从来没有做调研和计划，想到就要做，实在是无语，还TM说怕别人抄袭~呵呵~想想都想笑。这次又搞事了，想在小程序中处理图片后传给雕刻机进行雕刻。这边要做的就是调节图片的灰度、亮度。

参考文章：

微信小程序滤镜工具weImageFilters - 简书 (jianshu.com)

我就是参考上面这位大佬的文章，自己进行了一些修改就满足了我的需求

我在imagefilters.js里添加了一个新的DitherBrightnessContrast 方法，将GrayScale (srcImageData) 灰度、BrightnessContrastPhotoshop (srcImageData, brightness, contrast) 亮度、对比度、Dither (srcImageData, levels) 高频振动功能整合在了一起

ImageFilters.DitherBrightnessContrast = function (srcImageData, levels, brightness, contrast) {
  var srcWidth = srcImageData.width,
      srcHeight = srcImageData.height,
      dstImageData = this.utils.createImageData(srcWidth, srcHeight),
      dstPixels = dstImageData.data,
      srcPixels = srcImageData.data,
      srcLength = srcPixels.length,
      p4 = Math.PI / 4;

  // Convert to grayscale and store in dstPixels
  for (var i = 0; i < srcLength; i += 4) {
      var intensity = (srcPixels[i] * 19595 + srcPixels[i + 1] * 38470 + srcPixels[i + 2] * 7471) >> 16;
      dstPixels[i] = dstPixels[i + 1] = dstPixels[i + 2] = intensity;
      dstPixels[i + 3] = srcPixels[i + 3];
  }

  brightness /= 100;
  contrast = (contrast * 0.99) / 100;
  contrast = Math.tan((contrast + 1) * p4);

  var avg = 0;
  for (var j = 0; j < srcLength; j += 4) {
      avg += dstPixels[j];
  }
  avg /= srcLength / 4;

  this.utils.mapRGB(dstPixels, dstPixels, function (value) {
      if (brightness < 0) {
          value *= (1 + brightness);
      } else if (brightness > 0) {
          value += (255 - value) * brightness;
      }

      if (contrast !== 0) {
          value = (value - avg) * contrast + avg;
      }
      return value + 0.5 | 0;
  });

  levels = Math.min(Math.max(levels, 2), 255);

  var levelMap = [];
  var a = 0;
  var b = 0;
  for (var c = 0; c < levels; c += 1) {
      levelMap[c] = (255 * c) / (levels - 1);
  }

  var posterize = this.utils.buildMap(function (value) {
      var ret = levelMap[a];
      b += levels;
      if (b > 255) {
          b -= 255;
          a += 1;
      }
      return ret;
  });

  var x, y, index, old_r, old_g, old_b, new_r, new_g, new_b, err_r, err_g, err_b, nbr_r, nbr_g, nbr_b;
  var srcWidthMinus1 = srcWidth - 1, srcHeightMinus1 = srcHeight - 1;
  var A = 7 / 16, B = 3 / 16, C = 5 / 16, D = 1 / 16;

  for (y = 0; y < srcHeight; y += 1) {
      for (x = 0; x < srcWidth; x += 1) {
          index = (y * srcWidth + x) << 2;
          old_r = dstPixels[index];
          old_g = dstPixels[index + 1];
          old_b = dstPixels[index + 2];

          new_r = posterize[old_r];
          new_g = posterize[old_g];
          new_b = posterize[old_b];

          dstPixels[index] = new_r;
          dstPixels[index + 1] = new_g;
          dstPixels[index + 2] = new_b;

          err_r = old_r - new_r;
          err_g = old_g - new_g;
          err_b = old_b - new_b;

          index += 1 << 2;
          if (x < srcWidthMinus1) {
              nbr_r = dstPixels[index] + A * err_r;
              nbr_g = dstPixels[index + 1] + A * err_g;
              nbr_b = dstPixels[index + 2] + A * err_b;

              dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
              dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
              dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
          }

          index += (srcWidth - 2) << 2;
          if (x > 0 && y < srcHeightMinus1) {
              nbr_r = dstPixels[index] + B * err_r;
              nbr_g = dstPixels[index + 1] + B * err_g;
              nbr_b = dstPixels[index + 2] + B * err_b;

              dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
              dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
              dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
          }

          index += 1 << 2;
          if (y < srcHeightMinus1) {
              nbr_r = dstPixels[index] + C * err_r;
              nbr_g = dstPixels[index + 1] + C * err_g;
              nbr_b = dstPixels[index + 2] + C * err_b;
              
              dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
              dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
              dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
          }
      }
  }

  // Finally, return the processed image data
  return dstImageData;
};

就这样吧~~有问题再说！！