前端 base64下载图片亲测可用

二进制流转base64传送门https://blog.csdn.net/m0_60067716/article/details/124606097

 二进制流转base64这里就不介绍啦，可以看我上面的文章。

base64转图片核心代码

• imgSrc：就是base64地址哈

1.  
   saveImg() {
2.  
   var base64 = this.imgSrc.toString(); // imgSrc 就是base64哈
3.  
   var byteCharacters = atob(
4.  
   base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
5.  
   );
6.  
   var byteNumbers = new Array(byteCharacters.length);
7.  
   for (var i = 0; i < byteCharacters.length; i ) {
8.  
   byteNumbers[i] = byteCharacters.charCodeAt(i);
9.  
   }
10.  
    var byteArray = new Uint8Array(byteNumbers);
11.  
    var blob = new Blob([byteArray], {
12.  
    type: undefined,
13.  
    });
14.  
    var aLink = document.createElement("a");
15.  
    aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
16.  
    aLink.href = URL.createObjectURL(blob);
17.  
    aLink.click();
18.  
    },

完整代码

1.  
   <template>
2.  
   <div class="app">
3.  
   <img :src="imgSrc" alt="图片" />
4.  
   <button @click="saveImg">点击保存图片</button>
5.  
   </div>
6.  
   </template>
7.  
   <script>
8.  
   import axios from "axios";
9.  
   export default {
10.  
    name: "app",
11.  
    data() {
12.  
    return {
13.  
    imgSrc: "",
14.  
    };
15.  
    },
16.  
    methods: {
17.  
    // 二进制流转换为base64 格式。
18.  
    getBase64(data) {
19.  
    const blob = new Blob([data], { type: "image/jpg" }); //类型一定要写！！！
20.  
    return new Promise((resolve, reject) => {
21.  
    const reader = new FileReader();
22.  
    reader.readAsDataURL(blob);
23.  
    reader.onload = () => resolve(reader.result);
24.  
    reader.onerror = (error) => reject(error);
25.  
    });
26.  
    },
27.  
    // base64 保存图片
28.  
    saveImg() {
29.  
    var base64 = this.imgSrc.toString(); // imgSrc 就是base64哈
30.  
    var byteCharacters = atob(
31.  
    base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
32.  
    );
33.  
    var byteNumbers = new Array(byteCharacters.length);
34.  
    for (var i = 0; i < byteCharacters.length; i ) {
35.  
    byteNumbers[i] = byteCharacters.charCodeAt(i);
36.  
    }
37.  
    var byteArray = new Uint8Array(byteNumbers);
38.  
    var blob = new Blob([byteArray], {
39.  
    type: undefined,
40.  
    });
41.  
    var aLink = document.createElement("a");
42.  
    aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
43.  
    aLink.href = URL.createObjectURL(blob);
44.  
    aLink.click();
45.  
    },
46.  
    },
47.  
     
48.  
    mounted() {
49.  
    //网上随便找的图片
50.  
    const url =
51.  
    "https://img0.百度.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
52.  
    axios
53.  
    .get(url, {
54.  
    responseType: "blob", //一定要传！！！
55.  
    })
56.  
    .then((res) => {
57.  
    console.log(res.data, "二进制流");
58.  
    this.getBase64(res.data).then((binary) => {
59.  
    console.log(binary, "base64");
60.  
    this.imgSrc = binary;
61.  
    });
62.  
    });
63.  
    },
64.  
    };
65.  
    </script>

这篇好文章是转载于：学新通技术网