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

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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容