JS图片格式转换

.control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 30px;
  margin-right: 20px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  background: #0eaee2;
  cursor: pointer;
}
.download {
  text-decoration: none;
}
.upload_btn input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}
.select {
  margin-right: 20px;
  width: 80px;
  height: 30px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
select {
  height: 100%;
  outline: none;
  border: none;
  background: transparent;
}
.img_name {
  min-width: 100px;
  margin-right: 20px;
}
p {
  margin: 5px 0;
  font-size: 14px;
}

<div class="wrap">
  <div class="control">
    <div class="btn upload_btn">
      选择图片<input type="file" id="inputimg" />
    </div>
    <p class="img_name"></p>
    <div class="select">
      <select id="myselect">
        <option value="1">webp格式</option>
        <option value="2">jpeg格式</option>
        <option value="3">png格式</option>
      </select>
    </div>
    <div class="btn" id="start">开始转换</div>
    <a href="javascript:void(0)" class="btn download" id="download"
      >下载图片</a
    >
  </div>
  <p>预览：</p>
  <img id="imgShow" alt="" />
</div>

/*事件*/
document.getElementById('start').addEventListener('click', function() {
  getImg(function(image) {
    var can = imgToCanvas(image),
      imgshow = document.getElementById('imgShow')
    imgshow.setAttribute('src', canvasToImg(can))
  })
})
// 把image 转换为 canvas对象
function imgToCanvas(image) {
  var canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  canvas.getContext('2d').drawImage(image, 0, 0)
  return canvas
}
//canvas转换为image
function canvasToImg(canvas) {
  var array = ['image/webp', 'image/jpeg', 'image/png'],
    type = document.getElementById('myselect').value - 1
  var src = canvas.toDataURL(array[type])
  return src
}
//获取图片信息
function getImg(fn) {
  var imgFile = new FileReader()
  try {
    imgFile.onload = function(e) {
      var image = new Image()
      image.src = e.target.result //base64数据
      image.onload = function() {
        fn(image)
      }
    }
    imgFile.readAsDataURL(document.getElementById('inputimg').files[0])
  } catch (e) {
    alert('请上传图片！' + e)
  }
}
// input change事件
document.getElementById('inputimg').onchange = function uploadImg(e) {
  let file = e.target.files || e.dataTransfer.files
  if (!file.length) {
    return
  }
  console.log(file[0])
  if (/^image/.test(file[0].type)) {
    document.querySelector('.img_name').innerHTML = file[0].name
  } else {
    alert('请上传正确图片格式!')
  }
}
// 点击下载图片
document.getElementById('download').onclick = function downloadImg(e) {
  let url = document.getElementById('imgShow').src
  if (url) {
    this.setAttribute('href', url)
    this.setAttribute('download', new Date().getTime())
  }
}