使用javascript的图像的子资源完整性

我最近了解了子资源完整性，它阻止执行修改过的JS和CSS。由于当前的实现缺乏对图像的支持，我尝试使用自己的实现进行实验

<img data-src="http://localhost:8888/4.jpg" alt="" data-hash="" class="image">
<img data-src="http://localhost:8888/2.jpg" alt="" data-hash="" class="image">
<img data-src="http://localhost:8888/3.jpg" alt="" data-hash="" class="image">


<script src="qwest.js"></script>
<script src="md5.min.js"></script>
<script>

var images = document.getElementsByClassName("image");

     for( var i = 0, len = images.length; i < len; i++){
        popHash(images[i]);

    }

    function popHash(image) {

        qwest.get(image.dataset.src, {}, {responseType:"blob"})
        .then(function (xhr, response) {
            var src = window.URL.createObjectURL(response);
            image.src = src;
            image.dataset.hash = md5(src); 
           console.log(image.dataset.hash);


            /* code to check the equality of hashes here */
        }) 
    }


</script>

var images=document.getElementsByClassName（“图像”）；
对于（变量i=0，len=images.length；i

问题是每次我都会得到不同的MD5哈希。请帮我找出我做错了什么

---

我使用JavaScript-MD5（）获取MD5哈希，使用Qwest.js（）获取图像

，只需稍加修改，我就能够得到正确的结果。我使用arrayBuffer而不是blob和sha-256哈希。我为同样的东西建了一个小图书馆