针对课程讲的保存图片实现滤镜效果， 有更简单的解法

Question

client.js中

snapshot.onclick = function() {
  picture.className = filterSelect.value;
  var context = picture.getContext("2d");
  switch (filterSelect.value) {
    case 'blur':
      context.filter = 'blur(3px)';
      break;
    case 'grayscale':
      context.filter = 'grayscale(1)';
      break;
    case 'invert':
      context.filter = 'invert(1)';
      break;
    case 'sepia':
      context.filter = 'sepia(1)';
      break;
    default:
      break;
  }
  context.drawImage(videoPlayer, 0, 0, picture.width, picture.height);
}

对应的css样式是

<style>
      .none {
        -webkit-filter: none;
      }
      .blur {
        -webkit-filter: blur(3px);
      }
      .grayscale {
        -webkit-filter: grayscale(1);
      }
      .invert {
        -webkit-filter: invert(1);
      }
      .sepia {
        -webkit-filter: sepia(1);
      }
      canvas, img { 
        width:300px;
        height:auto 
      }
    </style>

Answer 1

李超 2021-06-22 22:37:50

赞！！！

• 提问者 superman566 #1

  非常感谢！