• js通过全路径下载文件及跨域下载图片


    // fileRealPath 文件全路径
    // fileName 文件名带格式的
    export function downloadFile(fileRealPath, fileName) {
        let link = document.createElement("a");
        let url = fileRealPath; //codeIMG  要下载的路径
        // 这里是将url转成blob地址,
        fetch(url)
            .then((res) => res.blob())
            .then((blob) => {
                // 将链接地址字符内容转变成blob地址
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link)
                window.URL.revokeObjectURL(link.href)
            });
    }
    // this.downloadIamge(this.pic.url, 'pic')
    //  解决跨域  imgsrc 文件全路径
    // name 文件名
    export function downloadIamge(imgsrc, name) {//下载图片地址和图片名
        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"); //得到图片的base64编码数据
    
            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }
  • 相关阅读:
    IOS手机 html5页面 数字变成蓝色链接的原因
    html5预加载图片的写法
    jquery取消绑定的方法
    CSS3幸运大转盘最简单的写法
    深度搜索应用之黑白图像(非递归)
    springday03-go1
    springday02-go4
    spring day02-go3
    springday02-go2
    spring da-y02-go1
  • 原文地址:https://www.cnblogs.com/dianzan/p/16086722.html
Copyright © 2020-2023  润新知