javascript 实现下载图片

LittleLiByte 发布于2019-08-23 18:14 / 3297人阅读

摘要：场景服务器接口返回一个图片的远程地址，要求前端进行下载实现方案前端接口拿到图片通过转成的格式，然后利用标签的属性进行下载，具体请看代码如果是同源域名下面的话。

场景

服务器接口返回一个图片的远程地址，要求前端进行下载

实现方案

前端接口拿到图片通过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...

海外云主机私有云 javascript实现 javascript实现动画 javascript实现队列 javascript实现方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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