我用引导卡制作了一个优雅的图像加载器，它在加载图像时在背景中显示渐变填充。图像加载后就会淡入。 渐变颜色是根据图像中的一些关键颜色手动创建的。
我的问题是 - 有人知道 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);
}
}
});
嗯...有趣...有一些 js 库，例如 vibrant.js 或 color-thief，但它们正在处理加载的图像（这很有意义，因为它位于前端）...
一种解决方法可能是创建一个非常低分辨率的图像，该图像将用 html 加载，然后你的 JS 将创建渐变，然后延迟加载真实图像...？
另一种解决方案可能是使用服务器端解决方案，例如 color-extractor 这是一个 php 解决方案，然后直接在 dom 元素上使用 inline-css 创建渐变
Grade.js 将完全按照您的描述进行操作。