首页 > 技术知识 > 使用技巧 XIYCMS内容管理系统

JS跨域下载图片的解决方案

作者:admin 更新:2023-12-05 09:53:58 来源:XIYCMS 人气:64

一般都是通过创建A标签,使用download属性进行下载,但是,如果遇到跨域的图片,就会直接打开图片,无法下载,这时,通过下面的方式即可:

方法一:

function  downLoadImage(imgsrc,name){

  var shijc = new Date().getTime();

  imgsrc = imgsrc + "?t=" + shijc;

  var image = new Image();

  // 解决跨域 Canvas 污染问题

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

  image.onload = function() {

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

    canvas.width = image.width;

    canvas.height = image.height;

    var context = canvas.getContext("2d");

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

    var url = canvas.toDataURL("image/png",0.7); //得到图片的base64编码数据

    var a = document.createElement("a"); // 生成一个a元素

    var event = new MouseEvent("click"); // 创建一个单击事件

    a.download = name?name+'.png':"photo.png"; // 设置图片名称

    a.href = url; // 将生成的URL设置为a.href属性

    a.dispatchEvent(event); // 触发a的单击事件

  };

  image.src = imgsrc;

}

方法二:

function downloadnewimg(src, name) {

    src = src + "?t=" + new Date().getTime();

    fetch(src).then((response) => {

      response.blob().then((myBlob) => {

        const href = URL.createObjectURL(myBlob);

        let a = document.createElement("a");

        a.href = href;

        a.download = name;

        a.click();

      });

    });

  }

-------

仅仅前端这样还不够,还需要图片服务器进行以下设置:

在宝塔的设置》配置文件里,或者伪静态设置里,加入以下代码:


add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";


你觉得这篇文章怎么样?

0 0



评论

发表