如何用js获取当前页面已加载的图片的binary？

譬如说一个网页是这样的：

如何通过js在浏览器加载完图片之后直接获取到该图片的字节流呢？
ps：不能用二次请求，谢谢大家。

回复内容：

如果是图片数据，那么用canvas。如果想要原始字节流，必须用ServiceWorker。 谢邀
读取图片的Exif信息组件
GitHub - exif-js/exif-js: JavaScript library for reading EXIF image metadata

更新一下：

<code class="language-js"><span class="kd">function</span> <span class="nx">getBase64Image</span><span class="p">(</span><span class="nx">img</span><span class="p">)</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"canvas"</span><span class="p">);</span>
    <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">img</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
    <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">img</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">"2d"</span><span class="p">);</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">img</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">dataURL</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s2">"image/png"</span><span class="p">);</span>

    <span class="k">return</span> <span class="nx">dataURL</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^data:image\/(png|jpg);base64,/</span><span class="p">,</span> <span class="s2">""</span><span class="p">);</span>
<span class="p">}</span>
</code>

document.querySelectorAll('img') 大概类似于document.getELementById('cool').onload=function(){//具体操作};
这个样子