首頁 > web前端 > H5教程 > 如何用js获取当前页面已加载的图片的binary?

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

WBOY
發布: 2016-06-07 08:43:36
原創
2511 人瀏覽過

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


如何用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(){//具体操作};
这个样子
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板