在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

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

为了简单性/可用性，我在这里使用加密Web API(特别是crypot.subtle.digest())，它不支持创建MD5哈希。但是如果你真的需要MD5哈希，你唯一需要改变的就是哈希算法。有像CryptoJS这样的库可以做到这一点。如果你想看一看，也有大量的开源实现(也见这个SO答案)。

要获取图像，可以使用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("");
}

任务的其余部分应该像比较两个字符串一样简单。如果它们匹配，则图像(很可能)是相同的。如果他们不这样做，他们就不是。

crypto.subtle显然只适用于兼容的浏览器和在一个安全的上下文中意味着你需要使用HTTPS(不是HTTP!)。