javascript 實現(xiàn)下載圖片

LittleLiByte 發(fā)布于2019-08-23 18:14 / 3445人閱讀

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

場景

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

實現(xiàn)方案

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

// 下載

function getUrlBase64(url,callback ,ext = "") {
        var canvas = document.createElement("canvas");   //創(chuàng)建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); //參數(shù)可自定義
            var dataURL = canvas.toDataURL("image/" + ext);    // 傳遞的自定義的參數(shù)
            callback.call(this, dataURL); //回掉函數(shù)獲取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實現(xiàn) javascript實現(xiàn)動畫 javascript實現(xiàn)隊列 javascript實現(xiàn)方法

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104894.html

從“雅虎軍規(guī)”看性能優(yōu)化

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

BlackMass 2019-08-30 15:55 評論0 收藏0
從“雅虎軍規(guī)”看性能優(yōu)化

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

Kyxy 2019-08-02 14:03 評論0 收藏0
從“雅虎軍規(guī)”看性能優(yōu)化

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

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

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

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

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

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