JavaScript中提取修改base64图片数据并转回可用格式的实现方法

处理完纯图像数据后，只需将其与原base64图片的媒体前缀拼接，即可得到可直接用于HTML元素的完整base64资源，代码实现如下：

let originalImage = myBase64Image
// 同时提取base64前缀和纯图像数据，兼容png/jpg/webp等各类图片格式
const matchResult = originalImage.match(/^(data:image\/[a-z]+;base64,)(.*)$/)
if (!matchResult) {
  throw new Error('输入内容不是合法的图片base64资源')
}
const [_, prefix, pureImageData] = matchResult

// 你的数据处理逻辑，此处用toUpperCase做演示
let processedImageData = pureImageData.toUpperCase()

// 拼接为完整base64图片
const processedBase64Image = prefix + processedImageData

使用示例 #

可直接赋值给img元素的src属性使用：

document.querySelector('#your-img-element').src = processedBase64Image

注意事项 #

base64编码本身是大小写敏感的，本次演示用的toUpperCase()方法会破坏原始编码结构，导致图片无法正常解析。实际加密场景中，只需在将数据投入使用前，通过配套解密逻辑把处理后的数据还原为合法的原始base64编码，即可正常显示图片。

内容的提问来源于stack exchange，提问作者Jip Helsen