如何在浏览器端实现图片Base64加密的文件下载与后续解密

现存代码核心缺口 #

• 加密生成的密文未与下载逻辑打通，原有下载方法基于dataURL文本编码，导出独立加密文件时易出现密文编码损坏
• 解密流程仅支持手动粘贴密文文本，缺少加密文件上传、读取环节，无法对接导出的独立加密文件
• 按钮置为禁用加载状态后未做恢复处理，会导致交互卡死

实现步骤 #

1. 替换下载逻辑，支持加密密文独立导出 #

将原有downloadTxt方法替换为基于Blob的通用文件下载能力，全程无额外编码转换，避免密文损坏：

function downloadEncryptedFile(filename, cipherData, mimeType = 'application/octet-stream') {
  // 用Blob直接封装密文字符串
  const blob = new Blob([cipherData], { type: mimeType });
  const tempUrl = URL.createObjectURL(blob);
  const downloadEl = document.createElement('a');
  downloadEl.href = tempUrl;
  downloadEl.download = filename;
  downloadEl.click();
  // 释放临时对象URL，避免内存泄漏
  URL.revokeObjectURL(tempUrl);
}

加密逻辑衔接修改：

fileReader.onload = function(fileLoadedEvent) {
  let base64value = fileLoadedEvent.target.result;
  let encryptCipher = CryptoJS.AES.encrypt(base64value, password).toString();
  // 直接导出独立加密文件，文件名自动加加密标识
  downloadEncryptedFile(`encrypted_${filesSelected[0].name}.enc`, encryptCipher);
  // 补全按钮状态恢复逻辑
  const submitBtn = document.getElementById('btn-submit-encrypt');
  submitBtn.removeAttribute('disabled');
  submitBtn.innerHTML = '加密并下载';
}

2. 改造解密流程，支持加密文件上传解密 #

给解密表单新增inputEncryptedFile文件选择框，替换原有的手动粘贴密文输入框，完整流程为：选择本地加密文件 → 文本读取文件内容 → AES解密得到原始图片base64流 → 渲染预览。
修改后的解密提交逻辑：

$("#form-decrypt").on('submit', function(e){
  e.preventDefault();
  const decryptFiles = document.getElementById("inputEncryptedFile").files;
  const pass = document.querySelector('#password-decrypt').value;
  if (!decryptFiles.length) {
    alert('请先选择本地保存的加密文件');
    return;
  }
  const encryptedFileReader = new FileReader();
  encryptedFileReader.onload = function(loadEvent) {
    const ciphertext = loadEvent.target.result;
    try {
      const decryptBytes = CryptoJS.AES.decrypt(ciphertext, pass);  
      const originalBase64 = decryptBytes.toString(CryptoJS.enc.Utf8);
      // 合法性校验：解密结果必须为标准图片base64格式，避免乱码被加载
      if (!originalBase64.startsWith('data:image/')) {
        throw new Error('解密结果无效');
      }
      const preview = document.getElementById('preview');
      preview.setAttribute('src', originalBase64);
      $("#preview").show();
    } catch (error) {
      alert('密码错误或加密文件已损坏');
    }
  }
  // 加密文件为纯文本密文，直接以文本格式读取即可
  encryptedFileReader.readAsText(decryptFiles[0]);
});

关键注意点 #

• 加密文件统一使用.enc后缀，MIME类型设为通用二进制流application/octet-stream，避免系统默认关联文本编辑器打开导致密文被误修改
• 大尺寸图片（2MB以上）的加解密计算可放到Web Worker中执行，避免阻塞页面主线程
• 解密环节必须增加结果格式校验，否则密码错误时解密出的乱码会被当作图片地址加载，触发大量控制台报错

内容的提问来源于stack exchange，提问作者Wisnu Putra Pratama