JS基于base64编码加密解密文本和图片

JS基于base64编码加密解密文本和图片

​

密码学，体系太庞大了，常见的加密解密算法很多，我仅了解了一下，这里仅介绍采用base64实现的加密解密的方法。

严格地说base64不是加密算法，他只是一种编码方式，是一种用64个字符来表示任意二进制数据的方法。详情可参见其它资料。

Base64编码具有不可读性，需要解码后才能阅读。算是伪加密吧。

加密解密文本

源码如下：

保存文件名为：BASE64编码加密解密文本.html，用浏览器打开效果：

 现在，你可以试试了。 

参考https://www.yisu.com/zixun/180535.html

加密解密图片

本文例子用到jquery，若本地使用请先下载，我这以里jquery-3.5.1. js版本为例，这样用

也可以不下载，需要联网【使用CDN（全称是Content Delivery Network：内容分发网络或内容交付网络）可参见https://blog.csdn.net/cnds123/article/details/126268941】如下使用

Canvas（画布） API提供了toDataURL()方法，可以把画布中的图形转换为图片。有了Data URL数据后，就可将这些数据直接填充到元素里，或者直接从浏览器里下载它们。

【关于toDataURL()方法参看https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

https://www.canvasapi.cn/HTMLCanvasElement/toDataURL】

这里介绍的加密解密图片基本原理：将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。

先看如何对图片加密并保存

源码如下：

    
        
        
    

    
    请选定要加密的图片文件      
    保存加密图片
    
        
    

    
   

保存文件名为：对图片加密并保存AA.html，用浏览器打开效果：

单击“保存加密图片”将保存到浏览器默认下载位置，你可以到哪儿找到已加密的图片，用“画图”等是打不开的。接着往下看。

再看对已加密图片文件进行解密

对由上面例子加密的图片文件进行解密，并将解密得到的图片保存到本地，源码如下：

    
        
        
    
    
    
    选定已加密的图片文件
    

     
    
 
    解密图片 
 
    保存已解密图片
    

    
    
  

保存文件名为：对已加密图片文件进行解密并可保存AA.html，用浏览器打开效果：

解密后的图片可保存，单击“保存已解密图片”将保存到浏览器默认下载位置，你可以到哪儿找到已解密的图片。

参考：https://www.jb51.net/article/239975.htm