vue指令自动判断是否支持webp,然后自动更换图片

directives: {
    webp: {
      bind: (el,vnode) => {
       //先判断浏览器是否支持webp
        let isWebp = false;
        let elem = document.createElement("canvas");
        if (!!(elem.getContext && elem.getContext("2d"))) {
          isWebp =  elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
        }
        //将属性保存在el中
        el.isWebp = isWebp;
      },
      inserted: (el,binding) => {
        el.updateImg = (el,binding) => {
          if (el.isWebp) {
            el.src = binding.value.toString().replace(/\.(png|jpe?g|gif|svg|bmp)$/g, ".webp");
          }else {
            el.src = binding.value
          }
        };
        el.updateImg(el,binding);
      },
      update: (el,binding) => {
        el.updateImg(el,binding);
      }
    }
  },