前端实现头像转黑白头像

  <div class="avatar" id="js-avatar">
    <canvas class="canvas" id="js-canvas" height="300" width="300"></canvas>
  </div>
  <div class="tip hide" id="js-tip">请长按图片保存</div>
  <label for="upload" class="btn">
    上传头像
    <input class="hide" type="file" name="file" id="upload" onchange="uploadFile(this)">
  </label>
  <button class="convert-btn" onclick="convert()">转换为黑白</button>

const btn = document.getElementById('js-button')
const tip = document.getElementById('js-tip')
const canvas = document.getElementById('js-canvas')
const ctx = canvas.getContext('2d')
// 上传文件回调, 将图片显示在canvas里
function uploadFile (e) {
  showCanvas()
  const img = e.files[0]
  const url = URL.createObjectURL(img)
  const image = new Image()
  image.src = url
  image.onload = function () {
    ctx.drawImage(image, 0, 0, 300, 300)
  }
  e.value = null
}
// 转换函数, 将当前canvas转换为黑白, 并生成为图片
function convert () {
  const imgData = ctx.getImageData(0, 0, 300, 300)
  const data = imgData.data
  for (var i = 0; i < data.length; i += 4) {
    const average = (data[i + 0] + data[i + 1] + data[i + 2] + data[i + 3]) / 3
    data[i + 0] = average // 红
    data[i + 1] = average // 绿
    data[i + 2] = average // 蓝
  }
  ctx.putImageData(imgData, 0, 0)
  const afterURL = canvas.toDataURL('image/png')
  // 生成图片
  const img = document.createElement('img')
  img.setAttribute('id', 'js-img')
  img.src = afterURL
  document.getElementById('js-avatar').appendChild(img)
  hideCanvas()
}
// 隐藏canvas, 让图片替换, 方便长按保存
function hideCanvas () {
  canvas.classList.add('hide')
  tip.classList.remove('hide')
}
// 显示canvas, 清除canvas画布, 并移除之前生成的图片
function showCanvas () {
  canvas.classList.remove('hide')
  if (document.getElementById('js-img')) {
    document.getElementById('js-img').remove()
  }
  tip.classList.add('hide')
}