js将base64图片保存本地

我不是女神ヾ 2023-10-02 11:26 11阅读 0赞

js将后端传输来的base64编码图片解析，并保存本地

下面就是代码部分：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>base64编码图片解析</title>
    <script type="text/javascript">
    
    function BrowseFolder() {  
    var eventPayload ={
            "content": "iVBORw0KGgo………………Plpg==",
            //图片base64格式太多，此处省略。不包含前缀：data:image/png;base64,
            "fileName": "12346190010jpg.png",
            "imageType": "png"
        };
    
        console.log(eventPayload)
        var content=eventPayload.content;
        var imageType=eventPayload.imageType;
        var fileName=eventPayload.fileName;
        console.log('fileName');
        if(content){ // 接口返回的数据部分
    		 // 解析图片
    		 // 因接口直接返回了base64代码部分，所以不需要截取，如果含"data:image/png;base64," 则需要自己做截取处理
    		 var raw = window.atob(content);
    		 var rawLength = raw.length;
    		 var uInt8Array = new Uint8Array(rawLength);
    		 for(var i = 0; i < rawLength; ++i) {
    		     uInt8Array[i] = raw.charCodeAt(i);
    		 }
             var blob = new Blob([uInt8Array], {type:'image/'+imageType}); 
    		 //保存图片
             var aLink = document.createElement('a');
             var evt = document.createEvent("HTMLEvents");
             evt.initEvent("click", true, true);
             aLink.download = fileName;
             aLink.href = URL.createObjectURL(blob);
             aLink.click();
         } else{
             console.log('没有base64代码');
         }
     }
    
    </script>
    </head>
    <body>      
    	 <p>js将后端传输的base64格式的图片直接解析，并保存到本地</p>
    	  <button onclick="BrowseFolder()">2123123124</button>
    </body>
    </html>

结果：如下图所示，点击保存图片，选择路径，js就会降后端传输的base64格式的图片直接解析，并保存到本地。![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5LqO5LuZ5a6Y_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5LqO5LuZ5a6Y_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/91fbe8049b8a4e7a9d342895b93a5187.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5LqO5LuZ5a6Y,size_20,color_FFFFFF,t_70,g_se,x_16