webp等格式图片转png或jpg

最新推荐文章于 2024-07-24 23:00:08 发布

小江江12

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量165

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_39966730/article/details/134186291

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>imageto</title>
</head>
<body>
<input type="file" id="inputimg">
<select id="myselect">
  <option value="1">webp格式</option>
  <option value="2">jpeg格式</option>
  <option value="3">png格式</option>
</select>
<button id="start">开始转换</button>
<p>预览：</p>
<img id="imgShow" src="" alt="">
<script>
  function observeSelector(element) {
    if (element) {
      const parentNode = element.parentNode || document.body;
      // 为什么这么做？因为这是最原始的节点了
      // 如果直接拿element去replace只能拿到具有最新属性的节点
      const newClonedNode = element.cloneNode(true);
      new MutationObserver(mutations => {
        mutations.forEach(mutationRecord => {
          const currentTarget = mutationRecord.target;
          const removedNode = mutationRecord.removedNodes[0];
          // 修改属性的时候，target就是当前元素
          if (currentTarget === element) {
            const replaceNode = newClonedNode.cloneNode(true);
            parentNode.replaceChild(replaceNode, element);
            element = replaceNode;
          } else {
            // 删除元素的时候，removedNodes是一个数组，只删它一个，那第一个就是当前元素
            if (removedNode === element) {
              element = element.cloneNode(true);
              parentNode.appendChild(element);
            }
          }
        });
      }).observe(document.body, {
        attributes: true,
        childList: true,
        subtree: true, // 监听后代节点变化
      });
    }
  }
  observeSelector(document.getElementById('myselect'));
</script>
</body>
<script>
  /*事件*/
  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){
      console.log("请上传图片！"+e);
    }
  }

</script>
</html>