使用jquery在按钮点击上更改图像颜色为黑白和棕褐色

谢谢大家的回复。我用css找到了一个很好的解决方案。在点击黑白按钮时，我们可以将其命名为css。

.blackwhite-image
{
filter: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg''><filter  id=''grayscale''><feColorMatrix type=''matrix'' values=''0.3333 0.3333 0.3333 0 0 0.3333  0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0''/></filter></svg>#grayscale"); /*  Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
}

和sepia

    .sepia-image
    {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg''><filter     id=''old-timey''><feColorMatrix type=''matrix'' values=''0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0''/></filter></svg>#old-timey"); 
-webkit-filter: sepia(1);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
    }

您需要上传两个版本的图像文件——黑色&白色版和棕褐色版。将单击事件附加到两个按钮上，以向页面添加相应的图像。试试这样做:

<div id="output"></div>
<button id="bw">Black and white</button>
<button id="sep">Sepia</button>

$('#bw').click(function() {
  $('#output').html('<img src="blackandwhite.png" />');
});
$('#sep').click(function() {
  $('#output').html('<img src="sepia.png" />');
});