Maison > interface Web > Tutoriel H5 > 如何用js获取当前页面已加载的图片的binary?

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

WBOY
Libérer: 2016-06-07 08:43:36
original
2511 Les gens l'ont consulté

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


如何用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>
Copier après la connexion
document.querySelectorAll('img') 大概类似于document.getELementById('cool').onload=function(){//具体操作};
这个样子
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal