（轉）js 根據url 下載圖片

第一種：

最方便快捷的方法就是使用HTML5原生的download屬性，這個屬性也可用來下載文件等。例如：

但顯然，若是純粹利用HTML屬性來實現下載，對於動態內容，就無能爲力。

想要實現不須要用戶點擊便能自動下載圖片到客戶端能夠參考下面的方法

第二種：藉助base64實現圖片的下載

若是咱們想下載一張圖片，能夠把這張圖片轉換成base64格式，而後下載

var downloadIamge = function(imgsrc, name) { //下載圖片地址和圖片名
        let image = new Image();
        // 解決跨域 Canvas 污染問題
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //獲得圖片的base64編碼數據
            let a = document.createElement("a"); // 生成一個a元素
            let event = new MouseEvent("click"); // 建立一個單擊事件
            a.download = name || "photo"; // 設置圖片名稱
            a.href = url; // 將生成的URL設置爲a.href屬性
            a.dispatchEvent(event); // 觸發a的單擊事件
        };
        image.src = imgsrc;
    }
    downloadIamge("1.jpg", "3.jpg");複製代碼

不過這種方式也存在一些問題：

1. Google瀏覽器不能下載到客戶端電腦上任何咱們想要的位置
2. 360瀏覽器中彈出下載提示框
3. IE11瀏覽器中跳出頁面，直接打開圖片，沒法下載