Javascript：根据图像数据创建背景渐变

Question

我用引导卡制作了一个优雅的图像加载器，它在加载图像时在背景中显示渐变填充。一旦图像加载，它就会淡入。 渐变颜色是根据图像中的一些关键颜色手动创建的。

我的问题是——有人知道 JS 模块或类似的东西，它可以在图像加载到 HTML 之前读取图像的颜色数据吗？因为我很想根据正在加载的图像动态创建渐变颜色。 我很确定 PHP 能以某种方式做到这一点，但如果 JS 能做到，那就更容易处理了。我知道这是一个很长的镜头。

您可以在下面的 codepen 链接中看到它正在工作（使用手动输入的渐变）：

https://codepen.io/jtibbles/pen/LYydBOx

HTML：

  <div class="card" style="width: 18rem;display:inline-block;margin-right:10px;vertical-align:top;">
  <div class="card-img-container cardgradient1">
  <div class="card-img-top cardimage" data-src="https://static.wixstatic.com/media/5cd6ef_0b75bcb5a2cbf17a53e97f76659cf189.jpg/v1/fill/w_503,h_335,al_c,q_80,usm_0.66_1.00_0.01/5cd6ef_0b75bcb5a2cbf17a53e97f76659cf189.webp">    </div>
  </div>
  <div class="card-body">
  <h5 class="card-title">Card title</h5>
  <p class="card-text">This card displays a nice gradient in the image location until the image is loaded in to place. The image then fades in gracefully.</p>
  <a href="#" class="btn btn-primary" id="examplebtn">reload...</a>
  </div>
  </div>

  <div class="card" style="width: 18rem;display:inline-block;margin-right:10px;vertical-align:top;">
  <div class="card-img-container cardgradient2">
  <div class="card-img-top cardimage " data-src="https://d3iso9mq9tb10q.cloudfront.net/wysiwyg/sanfrancisco/01-city-landing/San-Francisco-Skyline-Golden-Gate-Bridge-Big-Bus-Tours-Jan-2016.jpg"></div>
  </div>
  <div class="card-body">
  <h5 class="card-title">Card title</h5>
  <p class="card-text">This card displays a nice gradient in the image location until the image is loaded in to place. The image then fades in gracefully.</p>
  </div>
</div>

CSS：

.card-img-container{
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
width:100%;
display:block;
height:190px;
position:relative;
}
.card-img-container .cardimage{ 
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 2s ease-in-out;
}
.card-img-container .cardimage.show{
  opacity:1;
}
.card-img-container .cardimage.notransition{
  transition:none;
}

.card-img-container.cardgradient1{
    background: rgb(222,200,200);
    background: linear-gradient(180deg, rgba(222,200,200,0.6) 0%, 
    rgba(162,140,120,0.6) 31%, rgba(153,201,189,0.6) 65%, rgba(153,122,72,0.6) 85%);
}

.card-img-container.cardgradient2{
  background: rgb(227,255,253);
  background: linear-gradient(175deg, rgba(227,255,253,0.6) 1%, rgba(255,234,227,0.6) 15%, rgba(199,61,27,0.6) 44%, rgba(76,106,180,0.6) 92%);
}
  

JS：

document.addEventListener("DOMContentLoaded", function(event) { 

gracefulImageLoader();

//Just for purposes of this demo
document.getElementById("examplebtn").addEventListener("click",function(){
    resetDemo();  //Just for purposes of this demo
    window.setTimeout(gracefulImageLoader,2000);
});

function gracefulImageLoader(){
  var cardimages = document.getElementsByClassName("cardimage");
  for (let i = 0; i < cardimages.length; i++) {
    let currentcardimage = cardimages[i];      
    if(currentcardimage.dataset !=""){
      let img = new Image();
      img.src = currentcardimage.dataset.src;
      img.onload = function () {
        currentcardimage.style.backgroundImage = "url('"+img.src+"')";
        currentcardimage.classList.add("show");
      }
    }  
  }  
}   

function resetDemo(){
   let cardimages = document.getElementsByClassName("cardimage");
   for (let i = 0; i < cardimages.length; i++) {
     let currentcardimage = cardimages[i];
     currentcardimage.classList.add("notransition");
     currentcardimage.classList.remove("show");
     currentcardimage.style.backgroundImage = "none";
     window.setTimeout(function()    {currentcardimage.classList.remove("notransition");},250);
    }
  }
});

Answer 1

嗯...有趣...有一些像 vibrant.js 或 color-thief 这样的 js 库，但他们正在处理加载的图像（这很有意义，因为它在前端）...

一种解决方法可能是创建一个非常低分辨率的图像，该图像将使用 html 加载，然后您的 JS 将创建渐变，然后延迟加载真实图像...？

另一种解决方案可能是使用像color-extractor 这样的服务器端解决方案，这是一个 php 解决方案，然后在 dom 元素上直接使用 inline-css 创建渐变