原生js实现图片点击立即下载

2021-09-01  本文已影响0人  xsmile21
function download() {
     var src = "https://pic2.zhimg.com/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg";
     var filename;
     var filetype;
     var path = src;
     if (path.indexOf("/") > 0) {
             var file = path.substring(path.lastIndexOf("/") + 1, path.length);
             var fileArr = file.toLowerCase().split(".");
             filename = fileArr[0];
             filetype = fileArr[1];
      }
      var canvas = document.createElement("canvas");
      var img = document.createElement("img");
      img.onload = function (e) {
             canvas.width = img.width;
             canvas.height = img.height;
             var context = canvas.getContext("2d");
             context.drawImage(img, 0, 0, img.width, img.height);
             canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
             canvas.toBlob(blob => {
                   var a = document.createElement("a");
                   a.href = window.URL.createObjectURL(blob);
                   a.download = filename;
                   a.click();
             }, `image/${filetype}`);
      };
      img.setAttribute("crossOrigin", "Anonymous");
      img.src = src;
}
上一篇 下一篇

猜你喜欢

热点阅读