前端Base64 编码和解码的使用方法

这篇具有很好参考价值的文章主要介绍了前端Base64 编码和解码的使用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 Base64 类从 ‘js-base64’ 库进行 Base64 编码和解码

一、安装 ‘js-base64’库

vue: 使用 npm 或 yarn 包管理器来安装‘js-base64’ 库

npm install --save js-base64

原生: 通过

<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>

二、导入‘js-base64’库

vue:
导入 Base64 类:

import { Base64 } from 'js-base64';

或者:

import { encode, decode } from 'js-base64';

三、在页面中使用

vue:
Base64 编码的使用示例:

import { Base64 } from 'js-base64';

const stringToEncode = 'Hello, World!'; // 要进行 Base64 编码的字符串
const encodedString = Base64.encode(stringToEncode); // 进行 Base64 编码
console.log(encodedString); // 输出:SGVsbG8sIFdvcmxkIQ==

Base64 解码的使用示例:

import { Base64 } from 'js-base64';

const base64String = 'SGVsbG8sIFdvcmxkIQ=='; // Base64 编码的字符串
const decodedString = Base64.decode(base64String); // 进行 Base64 解码
console.log(decodedString); // 输出:Hello, World!

或者,导入 encode 和 decode 函数:
Base64 编码的使用示例:

import { encode } from 'js-base64';

const stringToEncode = 'Hello, World!'; // 要进行 Base64 编码的字符串
const encodedString = encode(stringToEncode); // 进行 Base64 编码
console.log(encodedString); // 输出:SGVsbG8sIFdvcmxkIQ==

Base64 解码的使用示例:

import { decode } from 'js-base64';

const base64String = 'SGVsbG8sIFdvcmxkIQ=='; // Base64 编码的字符串
const decodedString = decode(base64String); // 进行 Base64 解码
console.log(decodedString); // 输出:Hello, World!

原生:
使用 ‘js-base64’ 进行 Base64 编码和解码:文章来源地址https://www.toymoban.com/news/detail-729868.html

<!DOCTYPE html>
<html>
<head>
  <title>Base64 Example</title>
  <script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
</head>
<body>
  <script>
    const stringToEncode = 'Hello, World!'; // 要进行 Base64 编码的字符串
    const encodedString = Base64.encode(stringToEncode); // 进行 Base64 编码
    console.log(encodedString); // 输出:SGVsbG8sIFdvcmxkIQ==

    const base64String = 'SGVsbG8sIFdvcmxkIQ=='; // Base64 编码的字符串
    const decodedString = Base64.decode(base64String); // 进行 Base64 解码
    console.log(decodedString); // 输出:Hello, World!
  </script>
</body>
</html>

到了这里,关于前端Base64 编码和解码的使用方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS Base64编码和解码

    Base64 是一种编码方式,可以将任意字符(包括二进制字符流)转成可打印字符。JavaScript 定义了两个与 Base64 相关的全局方法。 btoa():字符串或二进制值转为 Base64 编码。 atob():把 Base64 编码转为原来的字符。 Base64 方法不能够操作非 ASCII 字符。 示例 要将非 ASCII 码字符转为

    2024年02月16日
    浏览(46)
  • Python中的Base64编码和解码

    Python3中Base64编码和解码,使用的是base64模块中的b64encode 和 b64decode方法,关于怎么使用,首先查看源码中的说明: b64encode : Encode the bytes-like object s using Base64 and return a bytes object b64decode : Decode the Base64 encoded bytes-like object or ASCII string s… The result is returned as a bytes object. 要点

    2024年02月13日
    浏览(38)
  • Java - 将base64编码解码成图片

    为了方便测试,我们可以使用一个图片编码网站,将图片进行base64编码 解密的代码如下 因为图片的Base64字符串非常大,动辄几百K,所以不能直接使用 String base64 = \\\"${该图片的base64串}\\\" 进行测试,否则编译器会报错 Java \\\"constant string too long\\\" compile error\\\" 。这个错误的出现,是因

    2023年04月09日
    浏览(50)
  • php的Url 安全的base64编码解码类

    2024年02月04日
    浏览(42)
  • base64与BytesIO图片进行编码、解码;api调用

    io.BytesIO 和 Base64 编码都是用于在内存中处理二进制数据的方法,但它们的目的和使用场景有所不同。 1) io.BytesIO io.BytesIO 是 Python io 库中的一个类,它提供了一个在内存中处理二进制数据的接口,模拟了一个文件对象。它允许你像操作文件一样操作内存中的二进制数据,这对

    2024年01月24日
    浏览(58)
  • 【JS】实现 Base64 编码和解码(及中文乱码问题)

    JavaScript 定义了两个与 Base64 相关的全局方法。 遇到中文编码需要先做一次 URI 组件编码或对解码后的内容进行 URI 解码 示例:Base64 编码 示例:Base64 解码 中文乱码处理方法: 按照 Base64 插件:编解码: js-base64 ,判断是否是Base64编码格式: is-base64 插件使用

    2024年02月15日
    浏览(37)
  • base64的使用方法

    目录 介绍 文件加解密的使用方法 字符串的加解密使用方法 介绍 Base64可以对任意的二进制数据进行编码,不论原数据是什么样的(可以是图片、视频、文本、字符串等)编码后我们得到的总是一个由众多字符组成的字符串,而且Base64是可逆的。 文件加解密的使用方法 1.下载

    2024年02月09日
    浏览(35)
  • 图片的编码存储与解码输出(基于Android将图片转Base64编码后再次解码会导致图片失真的解决办法)

    链接:https://pan.baidu.com/s/1hvVupGcCf1f41fizF08SNg?pwd=9988  提取码:9988 部分源码: 转Base64编码部分: 以上Android程序运行后会将图片的转为Base64编码进行存储,以下是图片转码后的结果。 下面是进行验证的php代码: 但是解码后输出后的照片出现了严重失真 数据量增加:Base64 编码

    2024年01月18日
    浏览(51)
  • C# 采用3DES-MAC进行签名 base64解码与编码

    ** ** 3DES-MAC(Triple Data Encryption Standard Message Authentication Code)是一种消息认证码(MAC)算法,用于验证消息的完整性和真实性。3DES-MAC使用了3DES(Triple Data Encryption Standard)加密算法的一部分来生成MAC值。以下是使用C#示例演示如何使用3DES-MAC签名一个消息: 首先,你需要确保在

    2024年02月09日
    浏览(36)
  • vue3中使用base64加密(两种方法)

    Hi,今天分享一个在vue中使用base64对用户名、密码进行加密的小案例。 我们是可以有两种方法的: 1.使用插件:js-base64 2.引入文件。 1.首先我们安装插件 2.项目中引入 3.使用 1.创建utils/base64.js文件夹,复制以下代码 2.在文件中引入该文件 3.使用 抓紧时间练起来吧,兄dei,再不练你

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包