js对图片base64编码字符串进行解码并输出图像示例

解码图片base64编码字符串并输出图像一般需要以下步骤：

1. 从DOM中获取到base64编码图片字符串。
2. 将base64编码图片字符串转换为Blob类型数据。
3. 使用FileReader对象将Blob类型数据读取为图像对象的URL地址。
4. 将URL地址赋值给img标签的src属性，以此输出图像。

下面我们来一步一步详细讲解这个过程，并提供两个示例。

示例1：

先在页面上放置一个img标签和一个button按钮，代码如下：

<img id="image" alt="示例图片">
<button id="button">点击解码图片</button>

接下来在JS文件中编写解码图片的函数，具体代码如下：

function decodeImage() {
  // 1. 获取base64编码图片字符串
  const base64String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsSAAALEgHS3X78AAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==";

  // 2. 转换为Blob类型数据
  const byteString = atob(base64String.split(",")[1]);
  const mimeString = base64String.split(",")[0].split(":")[1].split(";")[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);

  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  const blob = new Blob([ab], {type: mimeString});

  // 3. 将Blob类型数据读取为图像对象的URL地址
  const reader = new FileReader();
  reader.readAsDataURL(blob);

  reader.onload = function(event) {
    // 4. 输出图像
    const url = event.target.result;
    const image = document.getElementById("image");
    image.src = url;
    image.alt = "示例图片已解码";
  };
}

// 在button按钮点击事件中执行解码图片函数
const button = document.getElementById("button");
button.onclick = decodeImage;

这个示例中我们直接在函数内部指定了一个示例的base64编码图片字符串，实际应用中需要根据具体需求从DOM或接口中获取。

示例2：

接下来我们来看一个使用XHR对象从服务端获取base64编码图片字符串并解码输出的示例。

还是先在页面上放置一个img标签和一个button按钮，代码如下：

<img id="image" alt="示例图片">
<button id="button">点击解码图片</button>

然后在JS文件中编写获取图片和解码输出的函数，具体代码如下：

function getImage() {
  // 创建XHR对象
  const xhr = new XMLHttpRequest();
  // 配置请求参数
  xhr.open("GET", "http://example.com/api/image", true);
  xhr.responseType = "json";
  // 发送请求
  xhr.send();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 获取base64编码图片字符串
        const base64String = xhr.response.data;

        // 解码并输出图像
        decodeImage(base64String);
      } else {
        console.log("请求失败：" + xhr.status);
      }
    }
  };
}

function decodeImage(base64String) {
  // 转换为Blob类型数据
  const byteString = atob(base64String.split(",")[1]);
  const mimeString = base64String.split(",")[0].split(":")[1].split(";")[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);

  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  const blob = new Blob([ab], {type: mimeString});

  // 将Blob类型数据读取为图像对象的URL地址
  const reader = new FileReader();
  reader.readAsDataURL(blob);

  reader.onload = function(event) {
    // 输出图像
    const url = event.target.result;
    const image = document.getElementById("image");
    image.src = url;
    image.alt = "示例图片已解码";
  };
}

// 在button按钮点击事件中执行获取图片函数
const button = document.getElementById("button");
button.onclick = getImage;

这个示例中我们使用了XHR对象从服务端获取base64编码图片字符串，解码输出的代码与示例1中的一致，只是将解码部分封装成了一个函数并且加入了一个参数。

总体上来说，解码图片base64编码字符串并输出图像是一个比较简单的任务，只要按照上述步骤写好代码，通过调用特定的API函数即可完成。