獲取圖片主色調

<! DOCTYPE   html >

< html >

    < head >

        < meta   charset = " UTF-8 " >

        < title ></ title >

    </ head >

    < body >

      < div   class = " app " >

        < div >

            < img   src = " https://img2.baidu.com/it/u=1706459080,4251988046&fm=15&fmt=auto&gp=0.jpg "   alt = "" >

        </ div >

        < div   style = " width: 400px; " >

            < div >主色</ div >

            < div   class = " box " ></ div >

        </ div >

    </ div >

    </ body >

    < script   src = " https://cdn.jsdelivr.net/npm/[email protected]/dist/color-thief.min.js " ></ script >

    < script >

       const   colorThief   =   new   ColorThief ();

       const   img   =   document . querySelector ( ' img ' );

       const   box   =   document . querySelector ( ' .box ' );

       img . crossOrigin = ' Anonymous '

       const   getColorFun = () => {

           let   color   =   colorThief . getColor ( img );

           let   element   =   `<div class="colorbox" style="background-color: rgb( ${ color [ 0 ] } ,  ${ color [ 1 ] } ,  ${ color [ 2 ] } );height:400px;"></div>` ;

           box . innerHTML = element ;

           console . log ( color )

      }

       if  ( img . complete ) {

           getColorFun ();

      }  else  {

         img . addEventListener ( ' load ' ,  function  () {

               getColorFun (); 

          });

      }

      

   </ script >

</ html >