js base64转图片|极客笔记

js base64转图片

js base64转图片介绍

在前端开发中，我们经常需要进行文件的上传和下载操作。而在一些情况下，我们可能需要将图片文件转换成base64格式的字符串进行传输。这种方式可以减少客户端与服务器之间的网络请求，加快页面加载速度。同时，将base64字符串转换回图片也是非常常见的需求。

本文将详细介绍如何在JavaScript中将base64字符串转换为图片，以及如何将图片转换为base64字符串。

Base64 概述

Base64是一种用64个字符来表示任意二进制数据的编码方式。由于它只包含ASCII字符，所以可以直接在文本文件、XML文件或URL中嵌入，并且不会出现特殊字符。Base64编码后的数据量会增加约33%，因为它需要用更多的字符来表示相同的二进制数据。

在JavaScript中，我们可以使用atob和btoa方法来进行base64和二进制数据的相互转换。

atob()方法将base64字符串转换为二进制数据，例如：

let base64String = 'data:image/png;base64,iVBORw0KG...'; // 部分base64字符串
let binaryData = atob(base64String);

btoa()方法将二进制数据转换为base64字符串，例如：

let binaryData = 'some binary data';
let base64String = btoa(binaryData);

js Base64转为图片

现在我们来介绍如何将一个base64字符串转换为图片对象。我们可以通过创建一个Image对象，并将base64字符串赋值给其src属性来实现这一功能。

function base64ToImage(base64String) {
  let img = new Image();
  img.src = base64String;
  return img;
}

以下是使用该函数的示例代码：

let base64String = 'https://deepinout.com/logo.png'; // 部分base64字符串
let img = base64ToImage(base64String);
document.body.appendChild(img);

上述代码将在页面上添加一个图片元素并展示base64字符串所表示的图片。

js base64转图片

图片转为Base64

接下来，我们介绍如何将一张图片转换为base64字符串。

通过使用Canvas对象，我们可以将图片绘制到一个canvas元素上，然后使用toDataURL方法获取base64字符串。

以下是将图片转换为base64字符串的函数：

function imageToBase64(imageUrl) {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.src = imageUrl;

    img.onload = function() {
      let canvas = document.createElement('canvas');
      let context = canvas.getContext('2d');
      let width = img.width;
      let height = img.height;

      canvas.width = width;
      canvas.height = height;
      context.drawImage(img, 0, 0, width, height);

      let base64String = canvas.toDataURL();
      resolve(base64String);
    };

    img.onerror = function() {
      reject(new Error('Failed to load image.'));
    };
  });
}

以下是使用该函数的示例代码：

let imageUrl = 'https://deepinout.com/logo.png';
imageToBase64(imageUrl)
  .then(base64String => {
    console.log(base64String);
  })
  .catch(error => {
    console.error(error);
  });

上述代码将会输出图片的base64字符串。