javascript 實現下載圖片

LittleLiByte 發布于2019-08-23 18:14 / 3439人閱讀

摘要：場景服務器接口返回一個圖片的遠程地址，要求前端進行下載實現方案前端接口拿到圖片通過轉成的格式，然后利用標簽的屬性進行下載，具體請看代碼如果是同源域名下面的話。

場景

服務器接口返回一個圖片的遠程地址，要求前端進行下載

實現方案

前端接口拿到圖片通過canvas轉成base64的格式，然后利用A標簽的download屬性進行下載，具體請看代碼
ps:如果是同源域名下面的話。其實直接操作a標簽的href即可，下面展示的方法是跨域的實現

// 下載

function getUrlBase64(url,callback ,ext = "") {
        var canvas = document.createElement("canvas");   //創建canvas DOM元素
        var ctx = canvas.getContext("2d");
        var img = new Image;
        img.crossOrigin = "Anonymous"; // 支持跨域
        img.src = url;
        img.onload = function () {
            canvas.height = img.height; //指定畫板的高度,自定義
            canvas.width = img.width; //指定畫板的寬度，自定義
            ctx.drawImage(img, 0,0); //參數可自定義
            var dataURL = canvas.toDataURL("image/" + ext);    // 傳遞的自定義的參數
            callback.call(this, dataURL); //回掉函數獲取Base64編碼
            canvas = null;
        };
        }
        let path = "https://static-xesapi.speiyou.cn/1561014844679.jpg"
        let all = document.querySelector("a")
        getUrlBase64(path,function (base64) {
            all.setAttribute("href",base64)
});

注意兼容

其他可參考
https://segmentfault.com/a/11...

云服務器 GPU云服務器 javascript實現 javascript實現動畫 javascript實現隊列 javascript實現方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104894.html

從“雅虎軍規”看性能優化

摘要：避免重定向重定向用和狀態碼，下面是一個有狀態碼的頭瀏覽器會自動跳轉到域指明的。除此之外還有別的跳轉方式元標簽和，但如果你必須得做重定向，最好用標準的狀態碼，主要是為了讓返回按鈕能正常使用。要提高性能，優化這些響應至關重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來，性能優化是開發的重中之中，而提及前端...

BlackMass 2019-08-30 15:55 評論0 收藏0
從“雅虎軍規”看性能優化

摘要：避免重定向重定向用和狀態碼，下面是一個有狀態碼的頭瀏覽器會自動跳轉到域指明的。除此之外還有別的跳轉方式元標簽和，但如果你必須得做重定向，最好用標準的狀態碼，主要是為了讓返回按鈕能正常使用。要提高性能，優化這些響應至關重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來，性能優化是開發的重中之中，而提及前端...

Kyxy 2019-08-02 14:03 評論0 收藏0
從“雅虎軍規”看性能優化

摘要：避免重定向重定向用和狀態碼，下面是一個有狀態碼的頭瀏覽器會自動跳轉到域指明的。除此之外還有別的跳轉方式元標簽和，但如果你必須得做重定向，最好用標準的狀態碼，主要是為了讓返回按鈕能正常使用。要提高性能，優化這些響應至關重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來，性能優化是開發的重中之中，而提及前端...

TalkingData 2019-08-23 14:32 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

ysl_unh 2019-08-21 17:30 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

Tecode 2019-08-01 17:58 評論0 收藏0