把WebP格式图片保存成png/jpg（js实现）

背景

为什么要用webp格式的图片，好处在哪？

• 可以参考我的另一篇：juejin.cn/post/694859…

此文主要是讲，当你在网页上使用了WebP格式之后，如何让用户保存成能打的开的png/jpg格式？

• 因为webp格式比较新，用户的pc下载了webp格式后，会打不开图片，这样对用户体验较差

用js实现 把WebP格式图片保存成png

首先，浏览器默认的图片下载，肯定是你展示什么格式，就下载什么格式。所以我们只能绕过去，不能让用户点击默认的下载

经过调研，大多数人的下载图片的习惯是：用鼠标右键点击，在弹框内点击下载

根据这个习惯，我们可以劫持用户的 鼠标右击 或 点击滚轮，弹出我们自己写的小弹窗，用户点击下载后，我们让用户下载png或jpg等

• png或jpg的图片是我们提前就准备好的。因为使用webp格式的时候，本身就要考虑兼容问题，所以得要有兜底的png或jpg图片

window.onload = function(){
  // 去掉默认的contextmenu事件，否则会和默认右键事件同时出现。
  document.body.oncontextmenu = function(e){
    if (e.target.tagName.toLowerCase() === 'img') { // 只作用于img标签
      e.preventDefault();
    }
  };
  document.body.onmousedown = function(e){
    if (e.target.tagName.toLowerCase() === 'img') { // 只作用于img标签
      if(e.button === 2){
        console.log("你点了右键，我会弹出我自己写的小弹窗，让你点击下载png/jpg，方便你能打开图片");
      }else if(e.button === 0){
        console.log("你点了左键");
      }else if(e.button === 1){
        console.log("你点了滚轮，我会弹出我自己写的小弹窗，让你点击下载png/jpg，方便你能打开图片");
      }
    }
  }
}

具体的主动js 图片下载，可以参考这个demo

function downloadIamge(imgsrc, name) { // 下载图片地址和图片名
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
}
downloadIamge('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2Frr%2F9c%2FQJ8854426293.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648530895&t=e42740063d562bc72811648e220907e4', 'imgname')

码字不易，点赞鼓励！！