图像特效

相片底片

/*
 * @param {object} img 要实现反相的图片
 */
function createRevertPic(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var c = ctx.getImageData(0, 0, img.width, img.height);
  // chrome浏览器报错,ie浏览器报安全错误信息,原因往下看
  for (var i = 0; i < c.height; ++i) {
    for (var j = 0; j < c.width; ++j) {
      var x = i * 4 * c.width + 4 * j,  // imagedata读取的像素数据存储在data属性里,是从上到下,从左到右的,每个像素需要占用4位数据,分别是r,g,b,alpha透明通道
        r = c.data[x],
        g = c.data[x + 1],
        b = c.data[x + 2];
      //图片反相:
      c.data[x] = 255 - r;
      c.data[x + 1] = 255 - g;
      c.data[x + 2] = 255 - b;
      c.data[x + 3] = 255;    // 透明度设置为150,0表示完全透明
    }
  }
  ctx.putImageData(c, 0, 0);
  return canvas.toDataURL(); // 返回canvas图片数据url
}
window.onload = function () {
  var canvas = document.getElementById("canvas");
  var targetCanvas = document.getElementById("targetCanvas");
  var context = canvas.getContext("2d");
  var ctx = targetCanvas.getContext("2d");
  var image = new Image();
  image.src = 'http://localhost/bg.jpg';
  image.onload = function () {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    var img = new Image();
    img.src = createRevertPic(image)
    img.onload = function () {
      ctx.drawImage(img, 0, 0, targetCanvas.width, targetCanvas.height);
    }
  }
}

如果将 ctx.putImageData(c, 0, 0) 改为 ctx.putImageData(c, 0, 0, 50, 50, img.width/2, img.height/2) 将会看到剪裁效果,如下

灰度图像

/*
 * @param {object} img 要实现灰度的图片
 */
function createGreyPic(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var c = ctx.getImageData(0, 0, img.width, img.height);
  var pxData = c.data;
  for (var i = 0; i < c.height; ++i) {
    for (var j = 0; j < c.width; ++j) {
      var x = i * 4 * c.width + 4 * j,
        r = c.data[x],
        g = c.data[x + 1],
        b = c.data[x + 2];
      var grey = r * 0.3 + g * 0.59 + b * 0.11; // 转换函数
      // 灰度图片
      c.data[x] = grey;
      c.data[x + 1] = grey;
      c.data[x + 2] = grey;
      c.data[x + 3] = 255;
    }
  }
  ctx.putImageData(c, 0, 0);
  return canvas.toDataURL();
}
window.onload = function () {
  var canvas = document.getElementById("canvas");
  var targetCanvas = document.getElementById("targetCanvas");
  var context = canvas.getContext("2d");
  var ctx = targetCanvas.getContext("2d");
  var image = new Image();
  image.src = 'http://localhost/bg.jpg';
  image.onload = function () {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    var img = new Image();
    img.src = createGreyPic(image)
    img.onload = function () {
      ctx.drawImage(img, 0, 0, targetCanvas.width, targetCanvas.height);
    }
  }
}

注意到,相比图像反向,只是更改了公式: grey = r * 0.3 + g * 0.59 + b * 0.11;

其实图像处理就是各像素点之间的函数映射,不同的图像处理公式对应不同的结果而已。

可以根据这些公式,制作各种不同的图像处理滤镜。

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress