gpt4 book ai didi

javascript - 在原始图像上应用 camanJS 滤镜

转载 作者:行者123 更新时间:2023-12-01 02:00:43 29 4
gpt4 key购买 nike

如果我使用 camanJS 在图像上应用滤镜,一切都很好,但是当我单击第二个滤镜时,它需要返回到原始图像并将其应用到该图像上,但目前它将第二个滤镜放在仍具有第一个滤镜的图像。

这是我的 html 部分:

<table>
<tr>
<td><div id="photo"><canvas id="photoCanvas" width="500" height="500">Uw browser ondersteund geen canvas</canvas></div></td>
<td><div id="filterContainer">
<h4>Please select your photo effect.</h4>
<ul id="filters">
<li> <a href="#" id="normal">Normal</a> </li>
<li> <a href="#" id="vintage">Vintage</a> </li>
<li> <a href="#" id="lomo">Lomo</a> </li>
<li> <a href="#" id="clarity">Clarity</a> </li>
<li> <a href="#" id="sinCity">Sin City</a> </li>
<li> <a href="#" id="sunrise">Sunrise</a> </li>
<li> <a href="#" id="pinhole">Pinhole</a> </li>
</ul>
</div></td>
</tr>
</table>

我创建了一个带有 id photoCanvas 的 Canvas ,用于显示图像,并且我有一个包含不同过滤器的列表,如果单击,则会触发以下 javascript 部分:

$(function() {
Caman("#photoCanvas", "./images/183411_1871156496150_3955828_n.jpg", function () {
this.render();
});

var filters = $('#filters li a');
// originalCanvas = $('#canvas'),
// photo = $('#photo');

filters.click(function(e){

e.preventDefault();

var f = $(this);

if(f.is('.active')){
// Apply filters only once
return false;
}

filters.removeClass('active');
f.addClass('active');
// Listen for clicks on the filters
var effect = $.trim(f[0].id);

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function () {
// If such an effect exists, use it:
if( effect in this){
this[effect]();
this.render();
}
});
});
});

我试图告诉程序它需要使用特定图像来应用滤镜,但它不断堆叠滤镜。

如何解决此问题,以便它不会堆叠所有滤镜,而是将图像重置为原始图像,然后应用新滤镜?

最佳答案

您可以简单地执行以下操作:

更改这部分代码(实际上您应该只添加一行):

您的代码:

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function () {
// If such an effect exists, use it:
if( effect in this){
this[effect]();
this.render();
}
});

您需要如何更改:

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function () {
// If such an effect exists, use it:
if( effect in this){
//NOTE THIS IS THE LINE THAT I ADD FOR YOU:
this.revert();
this[effect]();
this.render();
}
});

希望现在它能很酷:))

请告诉我:)

最佳迪努兹

关于javascript - 在原始图像上应用 camanJS 滤镜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17040283/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com