js将base64图片保存本地

最新推荐文章于 2024-05-02 18:12:22 发布

小于仙官

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量7.5k

点赞数 9

文章标签： javascript java

本文链接：https://blog.csdn.net/qq_36743604/article/details/120719537

版权

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格式的图片直接解析，并保存到本地。

小于仙官

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
3
评论
js将base64图片保存本地

js将后端传输来的base64编码图片解析，并保存本地下面就是代码部分：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>base64编码图片解析</title><script type="text/javascript">functi...
复制链接

扫一扫