Canvas更改图片的颜色

通过改变rgb的值就可以改变图片的颜色了

 var img = new Image();
    img.onload = function () {
      var context = canvas.getContext('2d');
      // 图片绘制
      context.drawImage(this, 0, 0, 574, 820);
      // 然后获取中间100*100区域数据
      var imageData = context.getImageData(0, 0, 574, 820);
      var length = imageData.data.length;
      for (var index = 0; index < length; index += 4) {
        var r = imageData.data[index];
        var g = imageData.data[index + 1];
        var b = imageData.data[index + 2];
        //这里可以对 r g b 进行计算（这里的rgb是每个像素块的rgb颜色）
        imageData.data[index] = r;
        imageData.data[index + 1] = g;
        imageData.data[index + 2] = b;
      }
      // 更新新数据
      context.putImageData(imageData, 0, 0);
    };
  img.src = './content.png';    //图片地址

图片描边设置

通过每个像素的透明通道来判断该像素点是不是图片主题，（图片主体部分的透明通道一定有一个范围，注意，这里对图片有要求，不能是镂空图）

  var img = new Image();
    img.onload = function () {
      var context = canvas.getContext('2d');
      // 图片绘制
      context.drawImage(this, 0, 0, 574, 820);
      // 然后获取中间100*100区域数据
      var imageData = context.getImageData(0, 0, 574, 820);
      var length = imageData.data.length;
      for (var index = 0; index < length; index += 4) {
        var r = imageData.data[index];
        var g = imageData.data[index + 1];
        var b = imageData.data[index + 2];
        var a = imageData.data[index + 3];
        //这里可以对 r g b a进行计算（这里的rgba是每个像素块的rgb颜色）
        if (a > 0 && a < 255) {
            imageData.data[index] = 255;
            imageData.data[index + 1] = 20;
            imageData.data[index + 2] = 147;
            imageData.data[index + 3] = 255;
          }
      }
      // 更新新数据
      context.putImageData(imageData, 0, 0);
    };
  img.src = './content.png';    //图片地址