阈值图像颜色 - Base64答案

【问题标题】：Threshold image colors - Base64阈值图像颜色 - Base64
【发布时间】：2016-09-27 12:05:54
【问题描述】：

我想在 base64 字符串 (data:image/png;base64,iVBOR...) 上使用 threshold 过滤器，像这样使用 javaScript：

function threshold(base64) {
    some action whith base64 string...

    return base64; //base64 is updated by threshold filter    
}

有可能吗？如果可以，我该怎么做？

【问题讨论】：

标签： javascript base64 threshold

【解决方案1】：

var base64string = "data:image/png;base64,iVBOR..........",
    threshold = 180, // 0..255
    ctx = document.createElement("canvas").getContext("2d"),
    image = new Image();

image.onload = function() {

  var w = ctx.canvas.width  = image.width,
      h = ctx.canvas.height = image.height;

  ctx.drawImage(image, 0, 0, w, h);      // Set image to Canvas context
  var d = ctx.getImageData(0, 0, w, h);  // Get image Data from Canvas context


  for (var i=0; i<d.data.length; i+=4) { // 4 is for RGBA channels
    // R=G=B=R>T?255:0
    d.data[i] = d.data[i+1] = d.data[i+2] = d.data[i+1] > threshold ? 255 : 0;
  }

  ctx.putImageData(d, 0, 0);             // Apply threshold conversion
  document.body.appendChild(ctx.canvas); // Show result

};
image.src = base64string;

MDN - putImageData
MDN - getImageData

【讨论】：