灰度画布 - 将画布颜色变为黑白

Question

我正在使用这个js：http://www.jqueryscript.net/other/jQuery-Image-Processing-Plugin-With-Canvas-Tancolor.html

这个插件在做什么，它将我的画布转换为黑白，并将其保存在我网页上的 IMG 标签中。

这是这个插件使用的javascript：

(function ($) {  
    $.fn.tancolor = function(options) {
        var settings = $.extend({
            mode: 'grayscale',
            r_weight: 0.34,
            g_weight: 0.5,
            b_weight: 0.16,
            r_intensity: 1,
            g_intensity: 1,
            b_intensity: 1,
            load: null
        }, options );

        var r_weight;
        var g_weight;
        var b_weight;
        var r_intensity;
        var g_intensity;
        var b_intensity;

        // settings value
        switch(settings.mode){
            case 'grayscale':
                r_weight = 0.34;
                g_weight = 0.5;
                b_weight = 0.16;
                r_intensity = 1;
                g_intensity = 1;
                b_intensity = 1;
                break;
            case 'red':
                r_weight = 0.34;
                g_weight = 0.5;
                b_weight = 0.16;
                r_intensity = 255;
                g_intensity = 1;
                b_intensity = 1;
                break;
            case 'green':
                r_weight = 0.34;
                g_weight = 0.5;
                b_weight = 0.16;
                r_intensity = 1;
                g_intensity = 255;
                b_intensity = 1;
                break;
            case 'blue':
                r_weight = 0.34;
                g_weight = 0.5;
                b_weight = 0.16;
                r_intensity = 1;
                g_intensity = 1;
                b_intensity = 255;
                break;
            default:
                r_weight = settings.r_weight;
                g_weight = settings.g_weight;
                b_weight = settings.b_weight;
                r_intensity = settings.r_intensity;
                g_intensity = settings.g_intensity;
                b_intensity = settings.b_intensity;
                break;
        }

        // convert image to canvas
        var img = document.getElementById($(this).attr("id"));
        if(settings.load){
            img.src = settings.load;
            return;
        }
        var canvas = convertImageToCanvas(img);
        var ctx = canvas.getContext("2d");
        var imageData = ctx.getImageData(0, 0, img.width, img.height)
        $(this).replaceWith(canvas);

        // Processing image data
        var data = imageData.data;
        for(var i = 0; i < data.length; i += 4) {
            var brightness = r_weight * data[i] + g_weight * data[i + 1] + b_weight * data[i + 2];
            // red
            data[i] = r_intensity * brightness;
            // green
            data[i + 1] = g_intensity * brightness;
            // blue
            data[i + 2] = b_intensity * brightness;
        }
        ctx.putImageData(imageData, 0, 0);

        $('#'+$(this).attr("id")).each(function(i,e){ 
             var img = e.toDataURL("image/png"); 
             $(e).replaceWith( $('<img src="' + img + '"/>').attr({width: $(e).attr("width"), height: $(e).attr("height"), style: $(e).attr("style") }) ) });

        // Converts image to canvas; returns new canvas element
        function convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
            if(image.id) {
                canvas.id = image.id;
            }
            if(image.className) {
                canvas.className = image.className;
            }
        canvas.getContext("2d").drawImage(image, 0, 0);

        return canvas;
        }

        // Converts canvas to an image
        function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
        }
    };
}(jQuery));

我真正想要的只是将我的画布转换为黑白，但仅将其保存在网页上的画布标签中，而不是像我这样从应用程序下载灰度画布与另一个画布合并后的 IMG 标签。

任何帮助将不胜感激。

谢谢

Answer 1

要对不透明的图像进行灰度化，在兼容的浏览器上，你可以简单地 ^{[如果 Safari 没有一个奇怪的错误，你应该能够]} 使用context.globalCompositeOperation 属性并在绘制纯色之后将其设置为'luminosity'，然后再使用getImageData 解决方案：

var img = new Image();
var ctx = canvas.getContext('2d');
img.onload = function() {
  // set the canvas' size
  canvas.width = this.width;
  canvas.height = this.height;
  // first fill a rect
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // set the gCO
  ctx.globalCompositeOperation = 'luminosity';
  // if the browser doesn't support Blend Modes
  console.log(ctx.globalCompositeOperation)
  if (ctx.globalCompositeOperation !== 'luminosity')
    fallback(this);
  else {
    // draw the image
    ctx.drawImage(this, 0, 0);
    // reset the gCO
    ctx.globalCompositeOperation = 'source-over';
  }
}
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";

function fallback(img) {
  // first remove our black rectangle
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //draw the image
  ctx.drawImage(img, 0, 0);
  // get the image data
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var d = imgData.data;
  // loop through all pixels
  // each pixel is decomposed in its 4 rgba values
  for (var i = 0; i < d.length; i += 4) {
    // get the medium of the 3 first values
    var med = (d[i] + d[i + 1] + d[i + 2]) / 3;
    // set it to each value
    d[i] = d[i + 1] = d[i + 2] = med;
  }
  // redraw the new computed image
  ctx.putImageData(imgData, 0, 0);
}

<canvas id="canvas"></canvas>

但是由于 Safari 有一个错误，并且 gCO 解决方案（速度更快，但我认为这对您来说并不重要）删除了透明像素，所以这里只是以前的后备方案，它比之前的代码更简单你得到了。我希望你能读到它。

var img = new Image();
    var ctx = canvas.getContext('2d');
    img.onload = function() {
      // set the canvas' size
      canvas.width = this.width;
      canvas.height = this.height;
      //draw the image
      ctx.drawImage(this, 0, 0);
      // get the image data
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var d = imgData.data;
      // loop through all pixels
      // each pixel is decomposed in its 4 rgba values
      for (var i = 0; i < d.length; i += 4) {
        // get the medium of the 3 first values ( (r+g+b)/3 )
        var med = (d[i] + d[i + 1] + d[i + 2]) / 3;
        // set it to each value (r = g = b = med)
        d[i] = d[i + 1] = d[i + 2] = med;
        // we don't touch the alpha
      }
      // redraw the new computed image
      ctx.putImageData(imgData, 0, 0);

    }
    img.crossOrigin = "anonymous";
    img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";

<canvas id="canvas"></canvas>