php - 使用jquery更改按钮单击时的黑白图像颜色和棕褐色

Question

我有两个不同的按钮。一种用于黑白，另一种用于棕褐色。我需要在单击按钮时更改图像的颜色。是否有任何 jquery 脚本可以更改黑白和棕褐色的图像颜色。

Answer 1

谢谢你们的回复。我用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-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%);
    }

这对我很有用..

Answer 2

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

HTML

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

Javascript

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

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