base64 数据转png本地图片保存，js实现

要将 base64 编码的图像数据保存为 PNG 文件到本地，可以借助 JavaScript 和浏览器的 File API。以下是一个简单的步骤和示例代码：

步骤：

1. 解析 Base64 数据：将 Base64 编码的字符串解析为二进制数据。

2. 创建 Blob 对象：使用解析后的二进制数据创建一个 Blob 对象。

3. 创建 URL：通过 URL.createObjectURL() 方法创建一个临时的 URL，用于指向 Blob 对象。

4. 创建下载链接：将临时 URL 赋值给 <a> 标签的 href 属性，设置 download 属性为文件名，然后模拟点击 <a> 标签来触发下载。

示例代码：

// 假设 base64data 是你的 Base64 编码的图像数据
var base64data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'; // 你的 Base64 数据

// 解析 Base64 数据
var blob = base64ToBlob(base64data);

// 创建下载链接
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'image.png'; // 下载文件名为 image.png

// 模拟点击下载链接
downloadLink.click();

// 释放 URL 对象
URL.revokeObjectURL(downloadLink.href);

// 将 Base64 数据解析为 Blob 对象
function base64ToBlob(base64data) {
  var arr = base64data.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  
  return new Blob([u8arr], { type: mime });
}

解释：

• base64ToBlob 函数将 Base64 编码的图像数据转换为 Blob 对象。首先，通过 split(',') 分割 Base64 数据，获取 MIME 类型。然后，使用 atob 解码 Base64 数据为二进制字符串，并将其存入 Uint8Array 中。最后，使用 Blob 构造函数创建 Blob 对象，并指定 MIME 类型。

• URL.createObjectURL(blob) 创建一个临时的 URL，指向 Blob 对象。

• downloadLink.click() 模拟点击 <a> 标签来触发下载。

这样，就可以通过 JavaScript 将 Base64 编码的 PNG 图像数据保存为本地文件。

URL.createObjectURL 如何使用

URL.createObjectURL 是一个用于创建对象 URL 的方法，主要用于在浏览器中临时生成一个 URL，该 URL 可以指向一个 Blob 对象或者一个 File 对象。通常情况下，我们使用它来实现文件下载、显示 Blob 对象的内容等操作。

使用方法：

1. 创建对象 URL：

   var blob = new Blob(['Hello, World!'], { type: 'text/plain' });
   var url = URL.createObjectURL(blob);
   

   在这个例子中，我们创建了一个包含文本内容的 Blob 对象，然后使用 URL.createObjectURL 方法创建了一个指向该 Blob 对象的 URL。

2. 使用对象 URL：

   • 在下载链接中使用：

     var downloadLink = document.createElement('a');
     downloadLink.href = url;
     downloadLink.download = 'file.txt'; // 设置下载文件名
     downloadLink.textContent = 'Download File';
     
     document.body.appendChild(downloadLink);
     
     // 模拟点击下载链接
     downloadLink.click();
     

     上面的代码创建了一个 <a> 标签，将对象 URL 赋值给 href 属性，设置了 download 属性来指定下载文件的名称，然后通过 click() 方法模拟用户点击下载链接。

   • 在视频或音频元素中显示：

     var video = document.createElement('video');
     video.src = url;
     video.controls = true;
     
     document.body.appendChild(video);
     

     这段代码创建了一个 <video> 元素，并将对象 URL 赋值给 src 属性，从而将 Blob 对象的内容显示在视频播放器中。

3. 释放对象 URL：

   当不再需要对象 URL 时，应该及时释放以节省资源。可以通过 URL.revokeObjectURL 方法来释放对象 URL：

   URL.revokeObjectURL(url);
   

   调用 URL.revokeObjectURL 后，之前通过 URL.createObjectURL 创建的 URL 将会失效。

注意事项：

• URL.createObjectURL 创建的对象 URL 是临时的，通常在当前页面关闭或刷新时会被浏览器自动释放，但最佳实践是在不再需要使用时手动调用 URL.revokeObjectURL 进行释放。

• 对象 URL 通常用于在浏览器中临时展示或下载 Blob 数据，是一种非常便利的操作方式，特别适合于处理二进制数据、大文件等场景。