JS 實現跨域外鏈下載圖片（不支持IE）

跨域需要服務器設置

function ddd(){
            // ES6 語法
            let src = 'https://fenmul.github.io/Sin.gtihub.io/images/qrcode.bmp';
            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)=>{
                    let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = '1';
                link.click();
            }, "");
            }
            img.setAttribute("crossOrigin",'Anonymous');
            img.src = src;
        }

基於 ES6 語法實現，不支持 ie 瀏覽器

https://www.jianshu.com/p/6fe06667b748

js 圖片和 base64 互相轉換
https://www.cnblogs.com/zhuchenglin/p/7528723.html

Java 將圖片轉化爲 Base64

/**
     * 將網絡圖片編碼爲base64
     */
    public static String encodeImageToBase64(URL url) throws Exception {
//將圖片文件轉化爲字節數組字符串，並對其進行Base64編碼處理
        System.out.println("圖片的路徑爲:" + url.toString());
//打開鏈接
        HttpURLConnection conn = null;
        try {
            conn = (HttpURLConnection) url.openConnection();
//設置請求方式爲"GET"
            conn.setRequestMethod("GET");
//超時響應時間爲5秒
            conn.setConnectTimeout(5 * 1000);
//通過輸入流獲取圖片數據
            InputStream inStream = conn.getInputStream();
//得到圖片的二進制數據，以二進制封裝得到數據，具有通用性
            ByteArrayOutputStream outStream = new ByteArrayOutputStream();
//創建一個Buffer字符串
            byte[] buffer = new byte[1024];
//每次讀取的字符串長度，如果爲-1，代表全部讀取完畢
            int len = 0;
//使用一個輸入流從buffer裏把數據讀取出來
            while ((len = inStream.read(buffer)) != -1) {
//用輸出流往buffer裏寫入數據，中間參數代表從哪個位置開始讀，len代表讀取的長度
                outStream.write(buffer, 0, len);
            }
//關閉輸入流
            inStream.close();
            byte[] data = outStream.toByteArray();
//對字節數組Base64編碼
            BASE64Encoder encoder = new BASE64Encoder();
            String base64 = encoder.encode(data);
            System.out.println("網絡文件[{}]編碼成base64字符串:[{}]"+base64);
            return base64;//返回Base64編碼過的字節數組字符串
        } catch (IOException e) {
            e.printStackTrace();
            throw new Exception("圖片獲取失敗,請聯繫客服!");
        }
    }

頁面再進行解碼

$(function () {
//        var userList = [11,22,33,44];
//
//        $.each(userList,function(i,item){

//            console.log(i, item);
            $.ajax({
                type: "post",
                url: "${etlUrl}/etlYs/d",
                async:false,
                success: function (data) {
                    var blob = convertBase64UrlToBlob(data);
                    console.log(blob);
                    if (myBrowser() == 'IE') {
                        window.navigator.msSaveBlob(blob, '1.jpg');
                    } else {
                        var _a = document.createElement('a');
                        _a.download = '1.jpg';
                        _a.href = URL.createObjectURL(blob);
                        _a.click();
                    }
                },
                error: function (data) {
                    tipInfo("操作失敗！");
                }
            });
//        });

    });
    /**
     * 將 base64 轉換位 blob 對象
     * blob 存儲 2進制對象的容器
     * @export
     * @param {*} base64
     * @returns
     */
    function convertBase64UrlToBlob(base64) {
        var parts = base64.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; i++) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: contentType });
    }

    // 判斷瀏覽器類型
    function myBrowser() {
        var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
        if (userAgent.indexOf("OPR") > -1) {
            return "Opera";
        }; //判斷是否Opera瀏覽器 OPR/43.0.2442.991
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判斷是否Firefox瀏覽器  Firefox/51.0
        if (userAgent.indexOf("Trident") > -1) {
            return "IE";
        } //判斷是否IE瀏覽器  Trident/7.0; rv:11.0
        if (userAgent.indexOf("Edge") > -1) {
            return "Edge";
        } //判斷是否Edge瀏覽器  Edge/14.14393
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        } // Chrome/56.0.2924.87
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判斷是否Safari瀏覽器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
    }

服務器允許跨域時可以直接使用js實現

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function down(url, name) {
            var image = new Image();
            image.crossOrigin = "Anonymous";
            image.src = url;
            image.onload = function () {
                var base64 = getBase64Image(image);
                document.getElementById('img').setAttribute( 'src', base64);
                var blob = convertBase64UrlToBlob(base64);
                if (myBrowser() == 'IE') {
                    window.navigator.msSaveBlob(blob, name + '.jpg');
                } else {
                    var _a = document.createElement('a');
                    _a.download = name;
                    _a.href = URL.createObjectURL(blob);
                    _a.click();
                }
            }
        }

        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
            var dataURL = canvas.toDataURL("image/"+ext);
            return dataURL;
        }

        function convertUrlToBase64(url) {
            return new Promise(function (resolve, reject) {
                var img = new Image();
                img.crossOrigin = 'Anonymous';
                img.src = url;
                img.onload = function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
                    var dataURL = canvas.toDataURL('image/' + ext);
                    var base64 = {
                        dataURL: dataURL,
                        type: 'image/' + ext,
                        ext: ext
                    };
                    resolve(base64);
                };
            });
        }

        /**
         * 將 base64 轉換位 blob 對象
         * blob 存儲 2進制對象的容器
         * @export
         * @param {*} base64
         * @returns
         */
        function convertBase64UrlToBlob(base64) {
            var parts = base64.split(';base64,');
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;
            var uInt8Array = new Uint8Array(rawLength);
            for (var i = 0; i < rawLength; i++) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        }

        // 判斷瀏覽器類型
        function myBrowser() {
            var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
            if (userAgent.indexOf("OPR") > -1) {
                return "Opera";
            }; //判斷是否Opera瀏覽器 OPR/43.0.2442.991
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //判斷是否Firefox瀏覽器  Firefox/51.0
            if (userAgent.indexOf("Trident") > -1) {
                return "IE";
            } //判斷是否IE瀏覽器  Trident/7.0; rv:11.0
            if (userAgent.indexOf("Edge") > -1) {
                return "Edge";
            } //判斷是否Edge瀏覽器  Edge/14.14393
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            } // Chrome/56.0.2924.87
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //判斷是否Safari瀏覽器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
        }

    </script>
</head>
<body>
<button onclick="down('https://cdn.pingwest.com/portal/2019/01/17/W3KF2YMYW1b2j13bcYNs4c006feXP53S.jpeg?x-oss-process=style/pw_pc_article',1)">1</button>
<img id="img" src=""/>
</body>
</html>

圖片下載到本地

/**
 * @Author: <a href="mailto:[email protected]">lixin</a>
 * @Date: 2019/1/16
 * @Description: savePath 需要加上文件名
 */
public void downloadImg(String imgUrl, String savePath) {
    // 創建Httpclient對象
    CloseableHttpClient httpclient = HttpClients.createDefault();
    // 發送get請求
    HttpGet httpGet = new HttpGet(imgUrl);
    // 設置請求和傳輸超時時間
    RequestConfig requestConfig = RequestConfig.custom()
            .setSocketTimeout(100000).setConnectTimeout(100000).build();
    //設置請求頭
    httpGet.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.79 Safari/537.1");
    httpGet.setConfig(requestConfig);
    try {
        CloseableHttpResponse response = httpclient.execute(httpGet);
        if (HttpStatus.SC_OK == response.getStatusLine().getStatusCode()) {
            HttpEntity entity = response.getEntity();
            logger.info("下載圖片返回的entity對象："+entity+"對應的Content："+entity.getContent());
            InputStream in = entity.getContent();
            FileUtils.copyInputStreamToFile(in, new File(savePath));
            logger.info("下載圖片成功:"+imgUrl);
        }
    } catch (IOException e) {
        logger.error("downloadImg", e);
    } finally {
        httpGet.releaseConnection();
    }
}