如果我使用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>
Run Code Online (Sandbox Code Playgroud)
我创建了一个id为photoCanvas的画布,用于显示图像,我有一个列表,其中包含不同的过滤器,如果点击则会触发以下javascript部分:
$(function() {
Caman("#photoCanvas", "./images/183411_1871156496150_3955828_n.jpg", function () {
this.render();
});
var filters = $('#filters li a');
// originalCanvas …Run Code Online (Sandbox Code Playgroud)