js将base64图片保存本地-蒲公英云

js将base64图片保存本地

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