js 通过 blob 类文件对象下载图片，修改图片保存的名字（兼容式写法）

最新推荐文章于 2024-08-29 11:00:35 发布

时间飞逝子非鱼

最新推荐文章于 2024-08-29 11:00:35 发布

阅读量9.3k

点赞数 3

分类专栏： js下载文件

本文链接：https://blog.csdn.net/lgysjfs/article/details/88644837

版权

本文探讨了如何在JavaScript中通过Blob对象处理跨域图片下载的问题，详细介绍了使用a标签和iframe的限制，以及通过Base64和Blob转换实现图片下载的兼容性解决方案。

摘要由CSDN通过智能技术生成

问题：通过a标签下载图片，只有谷歌浏览器和火狐浏览器才支持

通过iframe的方式下载图片的时候，不能够修改图片的名字。

解决思路：

1、因为图片地址是跨域的，所以先要转成 base64 数据流

2、然后把 base64 转换成 blob对象

3、然后判断浏览器的类型，选择不同的方式把 blob 文件流下载到本地

转换成base64的方法

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.drawIm