JS解码Base64图片后PHP编码异常求助：无法识别JPEG标识

我来帮你捋清楚这个问题的核心——确实是编码处理方式不对导致的。你用window.atob()解码后得到的是UTF-16字符串，而JPEG的二进制字节（比如0xFF、0xD8）在UTF-16编码中会被转义破坏，自然找不到这些标记；但PHP的base64_decode()直接返回原始二进制字节流，所以能轻松定位。

为什么JS的atob会出问题？ #

window.atob()把Base64字符串解码后，返回的是UTF-16格式的字符串，不是原始二进制字节。比如JPEG里的0xFF字节，在UTF-16中会被处理成对应字符，失去了原始的字节值，所以你找不到chr(0xFF).chr(0xD8)的序列。

正确的JS处理方式：保留原始二进制字节 #

我们需要用Uint8Array来存储解码后的二进制数据，而不是转成字符串。这里给你两种可行的实现方案：

方案1：直接从Canvas获取Blob（推荐）

跳过toDataURL的Base64步骤，直接用toBlob获取原始二进制：

canvas.toBlob(function(blob) {
  const reader = new FileReader();
  reader.onload = function(e) {
    // 将Blob转成ArrayBuffer，再转成Uint8Array保存原始字节
    const jpegBytes = new Uint8Array(e.target.result);
    
    // 拼接你需要的HEADERS（注意也要转成字节）
    const headerBytes = new TextEncoder().encode("HEADERS");
    const combinedBytes = new Uint8Array([...headerBytes, ...jpegBytes]);
    
    // 生成最终Blob用于传输给PHP
    const finalBlob = new Blob([combinedBytes], { type: "application/octet-stream" });
    
    // 这里可以把finalBlob通过FormData传给PHP，比如：
    const formData = new FormData();
    formData.append("image_blob", finalBlob);
    // 用fetch或XMLHttpRequest发送请求
  };
  reader.readAsArrayBuffer(blob);
}, "image/jpeg");

方案2：基于toDataURL转成Uint8Array

如果必须用toDataURL，解码后要转成字节数组而非字符串：

const dataUrl = canvas.toDataURL("image/jpeg");
const base64Str = dataUrl.split(",")[1];
const binaryStr = window.atob(base64Str);

// 将二进制字符串转成Uint8Array，保留原始字节
const jpegBytes = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  jpegBytes[i] = binaryStr.charCodeAt(i);
}

// 现在可以在JS里查找JPEG标记了
function findByteSequence(arr, seq) {
  for (let i = 0; i <= arr.length - seq.length; i++) {
    let match = true;
    for (let j = 0; j < seq.length; j++) {
      if (arr[i + j] !== seq[j]) {
        match = false;
        break;
      }
    }
    if (match) return i;
  }
  return -1;
}

const startPos = findByteSequence(jpegBytes, [0xFF, 0xD8]);
const endPos = findByteSequence(jpegBytes, [0xFF, 0xD9]) + 2; // 加上标记本身的2个字节

对应PHP的处理调整 #

如果JS通过FormData传递Blob，PHP直接读取原始二进制数据即可，不需要额外转码：

// 接收上传的Blob文件
$rawData = file_get_contents($_FILES['image_blob']['tmp_name']);

// 查找JPEG起始和结束位置
$start = strpos($rawData, chr(0xFF) . chr(0xD8));
$end = strpos($rawData, chr(0xFF) . chr(0xD9), $start) + 2;

$imgBytes = substr($rawData, $start, $end - $start);
$imgBase64 = base64_encode($imgBytes);

总结 #

核心就是不要用字符串存储二进制数据，JS里用Uint8Array保留原始字节，PHP直接处理二进制流，这样JPEG的FFD8、FFD9标记就能正常识别了。

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