在 javascript 中生成图像的 MD5 校验和（客户端）

Question

我正在努力创建一个 javascript 应用程序来生成远程图像的校验和（使用 url）

我的程序使用校验和来检测我在远程服务器上的图像何时发生变化（尽管它们的名称没有改变：例如，image0 仍然是 image0，即使图像本身已经改变），然后通知客户端用户。

我成功编写了一个将校验和保存在文本文件中的 python 脚本，现在我想在客户端的 html 网页上使用 javascript 将这些“旧”校验和与新校验和进行比较。

这是一个非常有趣的链接，总结了我想要实现的目标https://codepen.io/dlanuara/pen/mLRLpL - 理想情况下，我想自动化该过程并在没有用户输入的情况下执行校验和生成器（使用不同于

function uploadFile(file) {}

的东西（Javascript 对我来说比较新，所以我不知道如何更改那里的代码，但我确信有可能）

这是一个与我相同的问题，它没有帮助我解决我的问题；/// 我怎样才能在 Javascript 中的特定 URL 获取图像的 MD5 校验和？

非常感谢您的帮助！

Answer 1

这只能部分回答您的问题，特别是关于如何从远程服务器获取图像以及如何从该图像计算哈希和的部分。

这里为了简单/可用性，我使用的是crypto Web API（特别是

crypot.subtle.digest()

），它不支持创建 MD5 哈希。但如果您确实需要 MD5 散列，您唯一需要更改的是散列算法。有像 CryptoJS 这样的库可以做到这一点。如果您想看看，还有大量的开源实现（另请参阅此SO answer）。

要获取图像，您可以使用 Fetch API。然后使用

arrayBuffer()

获取原始图像，计算哈希值并（如果需要）将哈希值转换回十六进制字符串，这是通常显示的典型格式哈希值。

(async() => {
    // get image from remote server
    const imageResponse = await fetch("https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png");
    if(imageResponse.status !== 200){
      throw new Error(`Failed to get image with status code ${imageResponse.status}`); 
    }
    const image = await imageResponse.arrayBuffer(); // get image bytes
    // if you need/ want to use MD5 you cannot use the crypto API
    // Instead use a library or write the MD5 hash function yourself (there al)
    const hashBuffer = await crypto.subtle.digest("SHA-1", image); // compute hash
    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
    console.log(convertToHexString(hashArray)); // convert to human-readable hex-string
})();

function convertToHexString(hashArray){
  return hashArray
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}

剩下的任务应该像比较两个字符串一样简单。如果它们匹配，则图像（很可能）是相同的。如果他们不这样做，他们就不是。