Maison > interface Web > js tutoriel > Comment utiliser javascript pour obtenir la couleur d'arrière-plan du corps principal de l'image (code)

Comment utiliser javascript pour obtenir la couleur d'arrière-plan du corps principal de l'image (code)

不言
Libérer: 2018-09-17 16:18:25
original
6775 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser javascript pour obtenir la couleur d'arrière-plan (code) du corps principal de l'image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

Lorsque nous avons ouvert Google Access, nous avons constaté que Google Pictures préchargeait la couleur du thème de l'image avant le chargement. Nous avons pensé que c'était très intéressant à l'époque. L'effet est comme ça<.>

Comment utiliser javascript pour obtenir la couleur darrière-plan du corps principal de limage (code)

Bien sûr, ils ont donné un code couleur lorsque le backend a donné json, n'en parlons pas pour l'instant, mais si le front -end le fait, il existe un moyen Oui, il est enregistré sur le blog de Zhang Xinxu qu'il s'agit d'une chose appelée rgbaster.js. Je publierai d'abord l'utilisation spécifique.

Le contenu de rgbaster.js est :

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):n.RGBaster=t()}(this,function(){"use strict";var t=function(n,o){var u=new Image,t=n.src||n;"data:"!==t.substring(0,5)&&(u.crossOrigin="Anonymous"),u.onload=function(){var n,t,e,r=(n=u.width,t=u.height,(e=document.createElement("canvas")).setAttribute("width",n),e.setAttribute("height",t),e.getContext("2d"));r.drawImage(u,0,0);var i=r.getImageData(0,0,u.width,u.height);o&&o(i.data)},u.src=t},s=function(n){return["rgb(",n,")"].join("")},f=function(n,t){return{name:s(n),count:t}},n={};return n.colors=function(n,u){var a=(u=u||{}).exclude||[],c=u.paletteSize||10;t(n,function(n){for(var t={},e="",r=[],i=0;i<n.length>t)return n.slice(0,t);for(var e=n.length-1;e<t-1>Le code html et js spécifique est : <p></p>
<pre class="brush:php;toolbar:false">

    <meta>
    <title>获取图片主题色脚本扩展的完整的示例</title>
    <script></script>



    <div>
        <img  alt="Comment utiliser javascript pour obtenir la couleur d'arrière-plan du corps principal de l'image (code)" >
    </div>
    <script>
    var img = document.getElementById(&#39;image&#39;);
    var box=document.getElementById(&#39;box&#39;);
    RGBaster.colors(img, {
        // return up to 30 top colors from the palette  从调色板返回最多30个顶级颜色
        paletteSize: 30,
        // don&#39;t count white
        //排除 白色
        exclude: [&#39;rgb(255,255,255)&#39;],
        // do something when done
        //获取成功之后
        success: function(payload) {
            box.style.background=payload.dominant;
            console.log(&#39;Dominant color:&#39;, payload.dominant);
            console.log(&#39;Secondary color:&#39;, payload.secondary);
            console.log(&#39;Palette:&#39;, payload.palette);
        }
    })
    </script>

Copier après la connexion
Le reste, dès que l'effet sort, tout le monde peut voyez-le d'un coup d'oeil, c'est tout simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

É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