如何根据动态变化的百分比值为图像着色？ [英] How to color an image based on a dynamically changing percentage value?

问题描述

我有一张图片，我希望根据代表百分比的动态变化值填充一些颜色，例如如果值为50％，则图像的一半应该着色。

如何使用JavaScript实现（可以使用jQuery）？

解决方案

您可以通过使用剪辑 CSS属性以及一些添加的标记来实现这一点背景颜色的底层容器。

摘要

在图像下方放置一个元素作为人造色填充，并设置其尺寸和位置以匹配图像'。然后使用JavaScript动态剪辑图像 - 从而揭示底层颜色 - 通过根据您的需要更改图像元素的剪辑值（当然，您可以控制每个单独偏移，例如左，下）。

注意：要明确实现您的需求，您可以更改要包含的基础元素另一个适合您需求的图像（即空桶的顶部图像和完整图像的底部图像）。

实施

在此示例中，滑块用于触发值更改。

标记

 < input type =rangemin =0max =100id =slidervalue =100/ > 
< div id =underlay>< / div> 
< img src =http://placekitten.com/500/207id =image/> 
  

样式

  #slider，
 #image，
 #underlay {
 / *绝对定位对于剪裁元素是必须的（#image）* / 
位置：绝对;剩余
：50px; 
宽度：500px; 
} 
 #image，
 #underlay {
 top：100px; 
身高：207px; 
} 
 #image {
 / *初始剪辑状态* / 
剪辑：rect（auto，auto，auto，500px）; 
} 
 #slider {
 top：50px; 
} 
 #underlay {
 background-color：＃4C76A5; 
} 
  

功能

<前级=lang-js prettyprint-override> var img = document.getElementById（'image'）;
var sld = document.getElementById（'slider'）;

sld.addEventListener（'change'，function（e）{

//获取滑块值
var val = e.srcElement.value;
//计算百分比以将绝对长度值传递给剪辑属性
var perc = img.width / 100 * val;

//相应地设置图像的左偏移剪辑
img.style.clip ='rect（auto，auto，auto，'+ perc +'px）';
}）;


现场演示

• on jsFiddle

参考文献

• 剪辑 on Mozilla Developer Network


• 浏览器支持

I have an image which i want to fill with some color based on a dynamically changing value that represents percentage, e.g. if the value is 50% half of the image should be colored.

How to achieve that using JavaScript (jQuery can be used)?

解决方案

You can accomplish that by utilizing the clip CSS property, and a little bit of added markup to serve an underlaying container for the unrevealing background color.

Abstract

Place an element underneath the image for the faux color fill, and set its dimensions and position to match the images'. Then use JavaScript to clip the image dynamically - thus revealing the underlying color - by altering the clip value of the image element according to your needs (you can, of course, control each offset separately, e.g. left, bottom).

Note: To achieve specifically what you desire you can alter the underlying element to contain another image that suits your needs (i.e. a top image of an empty barrel, and a bottom image of a full one).

Implementation

In this example a slider is used to trigger the value change.

Markup

<input type="range"  min="0" max="100" id="slider" value="100" />
<div id="underlay"></div>
<img src="http://placekitten.com/500/207" id="image" />

Styles

#slider,
#image,
#underlay {
    /* absolute positioning is mandatory for clipped elements (#image) */
    position: absolute;
    left: 50px;
    width: 500px;
}
#image,
#underlay {
    top: 100px;
    height: 207px;
}
#image {
    /* initial clip state */
    clip: rect(auto, auto, auto, 500px);
}
#slider {
    top: 50px;
}
#underlay {
    background-color: #4C76A5;
}

Functionality

var img = document.getElementById('image');
var sld = document.getElementById('slider');

sld.addEventListener('change', function(e) {

    // get the slider value
    var val = e.srcElement.value;
    // calc the percentage to pass an absolute length value to the clip property
    var perc = img.width / 100 * val;

    // set the images' left offset clip accordingly
    img.style.clip = 'rect(auto, auto, auto, ' + perc + 'px)';
});

Live Demo

• On jsFiddle

References

• clip on Mozilla Developer Network
• Browser support

这篇关于如何根据动态变化的百分比值为图像着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！