前端将base64转换为图片

前端将Base64编码的字符串转换为图片通常涉及到HTML、JavaScript和CSS。这是一个简单的步骤：

1. **创建img标签**：在HTML中，你可以直接设置`src`属性为Base64数据，例如：

   <img id="myImage" src="" alt="Base64 图片">

2. **获取Base64数据**：在JavaScript中，假设你有一个变量`base64String`存储了Base64编码的数据，可以这样做：

   var imgData = `data:image/${imageType};base64,${base64String}`;

`imageType`通常是图片的MIME类型，如'image/jpeg' 或 'image/png'。

3. **动态赋值给src**：然后将生成的`imgData`赋值给`img`标签的`src`：

   document.getElementById('myImage').src = imgData;

这样，浏览器就会尝试从指定URL加载并显示图片，即使这个URL实际上是Base64编码的文本形式。

相关问题

在前端 将base64 字节数组转换为url显示图片

在前端将 Base64 编码的字节数组转换为 URL 显示的图片，可以通过以下步骤实现：

1. 将 Base64 编码的字节数组转换为字符串。

2. 将字符串拼接为 data URI。

3. 将 data URI 赋值给 img 标签的 src 属性，从而显示图片。

下面是 JavaScript 代码示例：

// 将 Base64 编码的字节数组转换为 URL 显示的图片
function base64ToImageUrl(imageBytes) {
  // 将字节数组转换为字符串
  const imageString = btoa(String.fromCharCode.apply(null, imageBytes));

  // 将字符串拼接为 data URI
  const imageUrl = `data:image/png;base64,${imageString}`;

  // 将 data URI 赋值给 img 标签的 src 属性
  const img = document.createElement('img');
  img.src = imageUrl;
  document.body.appendChild(img);
}

其中，`imageBytes` 为 Base64 编码的字节数组。调用 `base64ToImageUrl(imageBytes)` 函数即可将图片显示在页面中。

前端下载base64图片

可以通过以下步骤实现前端下载base64图片：

1. 将base64字符串转换为Blob对象
2. 创建一个a标签，设置其href属性为Blob对象的URL
3. 设置a标签的download属性为要下载的文件名
4. 触发a标签的click事件，即可下载文件

以下是示例代码：

function downloadBase64Image(base64String, fileName) {
  const blob = base64ToBlob(base64String);
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  URL.revokeObjectURL(url);
}

function base64ToBlob(base64String) {
  const parts = base64String.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], { type: contentType });
}