javascript - 在上下文之间复制和操作图像数据

Question

我正在尝试:

1. 将图像加载到 Canvas 上。
2. 获取其imageData。
3. 操纵其 RGBA 值。
4. 将修改后的图像数据写入另一个上下文。

我已经编写了以下代码( JSFiddle )，它可以满足我的需要，但是基于此 example 的它太静态了.

在调试代码时，似乎 imageData 正在被更改，但是当将其写入上下文时，会显示默认图像，而不是更改后的图像。

var globalFilters = {
    greyscale : function(rgba) {
        var avg = (rgba.a + rgba.g + rgba.b) / 3;
        return {
            r: function (v) { return avg; },
            g: function (v) { return avg; },
            b: function (v) { return avg; }
        };
    },
    luma : function(rgba) {
        var lum = rgba.a * 0.299 + rgba.g * 0.587 + rgba.b * 0.114;
        return {
            r: function (v) { return lum; },
            g: function (v) { return lum; },
            b: function (v) { return lum; }
        };
    },
    invertColor :  function(rgba) {
        var avg = (rgba.a + rgba.g + rgba.b) / 3;
        return {
            r: function (v) { return 255 - v; },
            g: function (v) { return 255 - v; },
            b: function (v) { return 255 - v; }
        };
    },
    channelRotate : function(rgba) {
        return {
            r: function (v) { return rgba.g; },
            g: function (v) { return rgba.b; },
            b: function (v) { return rgba.r; }
        };
    },
    channelRotate2 : function(rgba) {
        return {
            r: function (v) { return rgba.b; },
            g: function (v) { return rgba.r; },
            b: function (v) { return rgba.g; }
        };
    }
};

function imageLoaded(e) {
    var canvas = document.getElementById('draw');
    var ctx = canvas.getContext('2d');
    var img = e.target;
    var imgW = img.width;
    var imgH = img.height;
        
    var rows = 2;
    var cols = 2;
    var filters = [ 'channelRotate', 'channelRotate2', 'invertColor' ];

    // Set the width and height of the canvas
    var width = imgW * cols;
    var height = imgH * rows;

    canvas.width = width;
    canvas.height = height;

    // Get all canvas pixel data
    var imgData = getImageData(img);
    
    ctx.putImageData(imgData, 0, 0);
    
    for (var i = 1; i <= filters.length; i++) {
        var filter = globalFilters[filters[i - 1]];
        var pixelCache = {};
        var row = Math.floor(i / rows);
        var col = i % cols;
        var yOffsetStart = row * imgH;
        var yOffsetEnd = yOffsetStart + imgH;
        
        for (var off = 0, y = yOffsetStart; y < yOffsetEnd; y++, off+=4) {
            var xOffsetStart = col * imgW;
            var xOffsetEnd = xOffsetStart + imgW;
            
            for (var x = xOffsetStart; x < xOffsetEnd; x++) {
                var rgba = getRGBA(off, imgData.data);
                var pixel = rgbaToInt(rgba);
                
                var rgbaOut;
                if (pixelCache[pixel]) {
                    rgbaOut = pixelCache[pixel];
                } else {
                    rgbaOut = transformRGBA(rgba, filter.call(null, rgba, pixel));
                    pixelCache[pixel] = rgbaOut;
                }
                               
                setRGBA(off, imgData.data, rgbaOut);
            }
        }
        
        ctx.putImageData(imgData, col * imgH, row * imgH);
    }
}

function getImageData(img) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, canvas.width, canvas.height);
}

function rgbaToInt(rgba) {
    return (rgba.r << 24) + (rgba.g << 16) + (rgba.b << 8) + (rgba.a);
}

function getRGBA(offset, data) {
    return {
        r: data[offset + 0],
        g: data[offset + 1],
        b: data[offset + 2],
        a: data[offset + 3]
    };
}

function setRGBA(offset, data, rgb) {
    data[offset + 0] = rgb.r || 0;
    data[offset + 1] = rgb.g || 0;
    data[offset + 2] = rgb.b || 0
    data[offset + 3] = rgb.a || 0;
}

function transformRGBA(rgba, filterFn) {
    return {
        r: clamp(filterFn.r ? filterFn.r.call(null, rgba.r) : rgba.r, 255),
        g: clamp(filterFn.g ? filterFn.g.call(null, rgba.g) : rgba.g, 255),
        b: clamp(filterFn.b ? filterFn.b.call(null, rgba.b) : rgba.b, 255),
        a: clamp(filterFn.a ? filterFn.a.call(null, rgba.a) : rgba.a, 255)
    };
}

function clamp(value, min, max) {
    if (arguments.length === 2) {
        max = min;
        min = 0;
    }
    if (value < min) return min;
    if (value > max) return max;
    return value;
}

var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = imageLoaded;
img.src = 'http://i.imgur.com/48KdD3D.jpg?1';

body {
    background: #208;
}
canvas {
    border: thin solid #333;
}

<canvas id="draw">Canvas</canvas>

Answer 1

第一个问题是您的过滤没有更改 imgData.data

[更新]

这里是导出过滤 Canvas 而不是导出 imageData 的重构代码。

var globalFilters = {
  unchanged : function(rgba) {
    return {
      r: function (v) { return v; },
      g: function (v) { return v; },
      b: function (v) { return v; }
    };
  },
  greyscale : function(rgba) {
    var avg = (rgba.a + rgba.g + rgba.b) / 3;
    return {
      r: function (v) { return avg; },
      g: function (v) { return avg; },
      b: function (v) { return avg; }
    };
  },
  luma : function(rgba) {
    var lum = rgba.a * 0.299 + rgba.g * 0.587 + rgba.b * 0.114;
    return {
      r: function (v) { return lum; },
      g: function (v) { return lum; },
      b: function (v) { return lum; }
    };
  },
  invertColor :  function(rgba) {
    var avg = (rgba.a + rgba.g + rgba.b) / 3;
    return {
      r: function (v) { return 255 - v; },
      g: function (v) { return 255 - v; },
      b: function (v) { return 255 - v; }
    };
  },
  channelRotate : function(rgba) {
    return {
      r: function (v) { return rgba.g; },
      g: function (v) { return rgba.b; },
      b: function (v) { return rgba.r; }
    };
  },
  channelRotate2 : function(rgba) {
    return {
      r: function (v) { return rgba.b; },
      g: function (v) { return rgba.r; },
      b: function (v) { return rgba.g; }
    };
  },
  applyFilter:function(img,filterName){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var filter = globalFilters[filterName];   
    var imgW=canvas.width=img.width;
    var imgH=canvas.height=img.height;
    ctx.drawImage(img,0,0);
    //
    var imgData=ctx.getImageData(0,0,imgW,imgH);
    var data=imgData.data;
    for(var i=0;i<data.length;i+=4){
      var rgba=this.getRGBA(i,data);
      var rgbaOut=this.transformRGBA(rgba, filter.call(null, rgba));
      this.setRGBA(i,data,rgbaOut);
    }
    ctx.putImageData(imgData,0,0);
    return(canvas);
  },
  getRGBA:function(offset, data) {
    return {
      r: data[offset + 0],
      g: data[offset + 1],
      b: data[offset + 2],
      a: data[offset + 3]
    };
  },
  setRGBA:function(offset, data, rgb) {
    data[offset + 0] = rgb.r || 0;
    data[offset + 1] = rgb.g || 0;
    data[offset + 2] = rgb.b || 0
    data[offset + 3] = rgb.a || 0;
  },
  transformRGBA:function(rgba, filterFn) {
    return {
      r: this.clamp(filterFn.r ? filterFn.r.call(null, rgba.r) : rgba.r, 255),
      g: this.clamp(filterFn.g ? filterFn.g.call(null, rgba.g) : rgba.g, 255),
      b: this.clamp(filterFn.b ? filterFn.b.call(null, rgba.b) : rgba.b, 255),
      a: this.clamp(filterFn.a ? filterFn.a.call(null, rgba.a) : rgba.a, 255)
    };
  },
  clamp:function(value, min, max) {
    if (arguments.length === 2) {
      max = min;
      min = 0;
    }
    if (value < min) return min;
    if (value > max) return max;
    return value;
  }
};

// list of filters to apply
var filters=['unchanged','channelRotate','channelRotate2','invertColor'];
// #cols on #draw canvas
var cols=2;
var rows=Math.ceil(filters.length/cols);

// load image (must satisfy CORS)
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = imageLoaded;
img.src = 'http://i.imgur.com/48KdD3D.jpg?1';

// draw the filtered images onto #draw canvas
function imageLoaded(){
  var img=this;
  var draw=document.getElementById('draw');
  var ctx=draw.getContext('2d');
  draw.width=cols*img.width;
  draw.height=rows*img.height;
  for(var i=0;i<filters.length;i++){
    var c=globalFilters.applyFilter(img,filters[i]);
    var row=parseInt(i/cols);
    var col=(i-row*cols);
    ctx.drawImage(c,col*img.width,row*img.height);
  }
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="draw" width=300 height=300></canvas>