base64图片转化为URL格式，从此告别杂乱代码！

让图片更易共享，提升用户参与度！base64图片转URL格式，一招鲜吃遍天！

前言

在当今互联网时代，图片已成为我们交流、分享信息不可或缺的一部分。但有时，由于图片文件较大或存在版权问题，直接分享图片并不方便。为了解决这一问题，人们发明了base64图片编码技术，它可以将图片数据转化为一串可读的文本，方便传输和存储。然而，base64图片的缺点是无法直接在浏览器中显示，需要先解码才能查看。本文将介绍一种将base64图片转换为URL格式的方法，这样可以方便地在网页中显示图片，提升用户参与度。

一、base64图片和URL格式

1. base64图片

base64图片是一种用base64编码对图片数据进行编码的格式。base64是一种二进制到文本的编码方法，它将二进制数据转换为由字母、数字和符号组成的文本字符串。base64图片的优点是体积小、易于传输，缺点是无法直接在浏览器中显示。

2. URL格式

URL（Uniform Resource Locator，统一资源定位符）是一种特殊的标识符，用于在计算机网络上定位资源。它可以指向网页、图片、视频或任何其他类型的文件。URL的优点是能够直接在浏览器中显示资源，缺点是体积较大，传输速度较慢。

二、base64图片如何转化为URL格式？

将base64图片转换为URL格式有两种方法：

1. 使用JavaScript转换

const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAGBSURBVEjH7ZY/S1RRHMffP/8zvO7M/s8+96xuYmMioJhCKRhJJ8oIGIBB8hIuQIIJCAkhSiKgkKgQkJQ+AlVhIKiIUkVKKgRw5du7G+v5fjzvzjznnXMnjd3fu+98/v/nO8/5n5mZmec4HUdTSTZu2b9++PXXqVCyuj0e/fv26XC7/61//2r59+zLGx8eP8fHx/fz5czKZTNDQ0ML27dv3zZs3b968ec7Ozk5OTs7KykpKSs7Ozh4fH589e/bkcrm8evXq7Ozs7N69e87Ozq6rq6s7d+689vZ2R0dH796929jY2MmTJz///PP37t07JSUl+/fvX79+/X39+vXrV69ePX78+Hnz5s0rV65ce/bs2bVrV+3bty8wMJBwOByj0bi6umrp0qX79++/efPmTZo0afPnz98+fP759+7Z58+aNGzfufv36FXd3d8+dO/fp06ffu3fv9u3bN2jQoK1bt64qKys7Nzd3ZmamR48e7dq1a2trbGys/fv39/X17Nu3bv38/Ozv7x87duzbt2+1tLQ0MTGxu7v75MmT586d27Vr18jISN++fZs0aRLg4OD59+8fm5ub8/Pzf//99126dInQ0NAqKysrKSkp+vr69vT09Pb2jp+fH2NjY+Pj43/79u19+/Zt3rx53759586d27dv33r16s3Nzfr16z/69OnRo0c7duzYvXt3b29vY2NjamoqPT29k5OT69evn56ePu3btysrK2tra3t2rVrV65cOXPmzJcvX+zsbExMTF5eXq+vr83NzQ0NDZGRkb28vNra2r17987NzS0pKen69esrKyv37t07ODg4OTk5lJeXj4+Pj7m5ucHBwW7dusXHjx8/fvx4dnZ2Q0ND6enp4uLi4+Pzs7Ozo2NjQMDA0NDQ1qa2vT0tJOnDhRcnJy7969Ozs7f/78OTg42NzcbG1tXV1dbGxsY2Nja2vr8/MzNLS0r1799bW1s7Ozpqa2ujo6PDwcPb29tDQ0MjISEhISEhmZmZcXFxGhoas7Oz8/Pz5+fn6enp1tbW/ft27exsbG/v7969erFxsbG4uLi7u7u9PT0xMSEp6enubm5lJSUl29vb19fX4ODg9+/f9+7d29jY2NLS0p6eHvXr1+fn51NSUnR0dCgsLIz09PTU1NXV1dQ0MDGhoah4eHqampmZmZb29vXFxccXFxcnJyaGhodHR0SUlJ6enpR0dHNTU1Nzc3t7e3Gxub3NxcUlJSsrKyampqpqamZWVlGhoamZmZHTt27NjY2NLS0kJCQm5ubl5eXm5ubqampk5OT8fHx7u7uzc3Nr6+vl5WV2dlZUlJS8vLyampq7u7uR0dHra2tm5ubzc3NnZ2dpqamYGBgSUlJJSUlDwsLKy0tLS0tLS8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy