jpeg 的有效 base64 字符串答案

【问题标题】：Valid base64 string for a jpegjpeg 的有效 base64 字符串
【发布时间】：2016-03-17 06:45:59
【问题描述】：

这是一个有效的 base64 格式的 jpeg 字符串吗？

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD

有问题的字符是“base64”之后的“/9j/”，

我猜这可能与压缩有关，因为它是 JPEG。

与 png 的 base64 字符串相比，模式不同，即字符模式与上述不同。

 data:image/png;base64,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

我的问题的根源是我将一组画布编码为 .jpeg 和 .png 的 base64 - .png 的输出很好，而 .jpeg 的输出始终为黑框。

我正在使用 html2canvas (javascript) 捕获图像，它们是 html 节点的“图像”，我已经解决了透明度问题，例如将 dom 节点的背景设置为白色。

我正在编码的所有 jpeg 图像都有这种“/9j/”模式，我在循环中生成它们，所以它很可能是所有图像都具有的共同属性。

我似乎也无法在网上找到合适的工具来验证 base64 字符串。

【问题讨论】：

你有没有给出 full 字符串。里面只有 211 个字符，不是 base64 应该是四的倍数。
是的，这是完整的字符串，有趣..

标签： javascript image base64

【解决方案1】：

让我们检查一下：

$ echo -n '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgID' | base64 --decode | file -
/dev/stdin: JPEG image data, JFIF standard 1.01

因此它被识别为有效的 JPEG 标头（但这并不一定意味着整个 JPEG 数据都是有效的，但至少它看起来像 JPEG）。

JPEG 数据和 PNG 数据的区别在于文件格式不同。此外，/ 是 Base64 中的有效字符。

【讨论】：

如果你使用 whole 字符串，你会得到base64: invalid input。
@paxdiablo 不适合我。还是您的意思是包括“标题”（data:image/jpeg;base64,）？
不，从/9j 开始。只有 211 个字符，我似乎记得它必须是 3 或 4 的倍数，= 用于填充。
@paxdiablo 显然，OS X 可以，Linux 不行。不过，也许发布的不是完整的图像数据。

【解决方案2】：

你可以做一个js检查。不知道效率如何。

function checkImage( str ) {
   var _img = document.createElement( 'img' );
   _img.onerror = function() {
                      reportError(str);
                  }
   _img.src = str;
}

function reportError(str) {
   alert('Invalid image :' + str)
}

希望对你有帮助。

【讨论】：

谢谢，我确实签入了 JS 没有错误，这是我第一次为字符串是否有效编写 JS 测试，所以我确实接受了我可能犯了一个错误 :)
你可以做checkImage('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...')，它不是一个有效的图像，它会发出同样的警告。对有效图像无操作。不过你可以改变它。

【解决方案3】：

文件类型可以通过幻数来识别。对于 JPEG，偏移量 0 处的幻数是“ff d8 ff”。如果将其编码为 Base64，您将始终得到“/9j/”

【讨论】：

【解决方案4】：

首先我们必须指定什么是有效的：

完全合法的图像，在渲染为图像时没有错误。
只要它可以直观地显示某些内容，请忽略错误。（可能存在分辨率或尺寸问题，但我们不在乎。）

在第一种情况下，我们可以使用onerror来绑定事件。该函数检查base64字符串是否可以转换为<img>而没有任何错误。它不仅会捕获所有损坏的图像，而且会显示可以显示但有错误的图像。

let checkImage = (str) => {
    let img = new Image();
    img.src = str;
    img.onerror = () => { //do something }
}

或者如果我们只是想让某些东西无论它给我们什么错误都可以渲染为图像，我们可以忽略错误并直接检查图像的大小是否可用。

let checkImage = (str) => {
    let img = new Image();
    img.src = str;
    img.onload= () => { 
          if(img.width==0 || img.height==0){ //do something} 
    }
}

【讨论】：