Rumah  >  Artikel  >  hujung hadapan web  >  如何用js获取当前页面已加载的图片的binary?

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

WBOY
WBOYasal
2016-06-07 08:43:362484semak imbas

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


如何用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(){//具体操作};
这个样子
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn