js下载图片

可复制粘贴使用
downloadEWM(url, name) {

      // 获取图片地址

      const tag = document.createElement("a");

      // 此属性的值就是下载时图片的名称,注意,名称中不能有半角点,否则下载时后缀名会错误

      tag.setAttribute("download", name.replace(/\./g, "。"));

      const image = new Image();

      // 设置 image 的 url, 添加时间戳,防止浏览器缓存图片

      image.src = url + "?time=" + new Date().getTime();

      //重要,设置 crossOrigin 属性,否则图片跨域会报错

      image.setAttribute("crossOrigin", "Anonymous");

      // 图片未加载完成时操作会报错

      image.onload = () => {

        tag.href = getImageDataURL(image);

        tag.click();

      };

      function getImageDataURL(image) {

        // 创建画布

        const canvas = document.createElement("canvas");

        canvas.width = image.width;

        canvas.height = image.height;

        const ctx = canvas.getContext("2d");

        // 以图片为背景剪裁画布

        ctx.drawImage(image, 0, 0, image.width, image.height);

        // 获取图片后缀名

        const extension = image.src

          .substring(image.src.lastIndexOf(".") + 1)

          .toLowerCase();

        // 某些图片 url 可能没有后缀名,默认是 png

        return canvas.toDataURL("image/" + extension, 1);

      }

    }

你可能感兴趣的:(js下载图片)