JavaScript JS 图片转MD5 Img转MD5 文件转MD5 URL文件转MD5 获取原始文件的MD5

首先引入JS文件： 

<script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.0/spark-md5.min.js"></script>

测试代码：

<script>
    !function () {
        var xhr = new XMLHttpRequest();
        // 也可以使用POST方式，根据接口，测试的图片是百度搜索首页的logo（2019-11-28 17:35）
        xhr.open('GET', 'http://127.0.0.1:8080/bd_logo1.png', true);    
        xhr.responseType = "blob";  // 返回类型blob
        xhr.onload = function () {
            if (this.status === 200) {
                // 获得二进制
                var blob = this.response;
                var reader = new FileReader();
                reader.onload = function (e) {
                    var spark = new SparkMD5.ArrayBuffer()
                    spark.append(e.target.result)
                    console.log("md5:",spark.end())
                }
                //转换成FileReader对象
                reader.readAsArrayBuffer(blob);
            }
        }
        xhr.send();
    }();
</script>

控制台输出：

windows输出：

 

通过这种方式获取的文件MD5是真正的MD5！那种经过canvas转来转去生成的MD5早已经不是原来的MD5了。

当然也可以通过这种方式获得本地文件的md5，具体可参考：https://www.cnblogs.com/jianqingwang/p/6999356.html，当我们看完这篇文章即可把file转成FileReader然后再转换成md5。

注意：通过网络下载（ajax）的文件必须和自己在一个域下否则会报跨域错误（通过设置Access-Control-Allow-Origin可以解决）,具体可看控制台