- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果我使用 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/
我试图理解 camanjs 中的事件,但我需要一些示例。每个人都可以给我写一个简单的例子吗: 1) 将图像加载到 canvas(完成) Caman("#canvas-img2", base64_or_
我正在使用 CamanJS 向我的网站添加一些图像处理功能,它是一个简单而出色的库,但它的文档仍然很差。 我正在将图像上传到我的网站,然后对上传的图像应用所有效果(它没有保存在服务器上,我在客户端修改
我正在使用 CamanJS,除了对比度之外,所有效果都运行良好。我不知道为什么,但它破坏了形象。 这是我的 HTML 和 JavaScript,这里还有一个 jsFiddle 示例:http://js
如果您在 CamanJS 中使用旋转插件,那么当您尝试恢复更改时会出现问题。 Caman 仅以在裁剪或调整图像大小时有效的方式实现,但在旋转图像时则无效。当您恢复并且图像旋转时,图像会重新加载扭曲,因
如果我有一张图片应用了滤镜,例如Lomo 过滤器,有没有办法让它成为当前的 Caman 实例? 意思是,如果我随后想调整我应用滤镜的图像的亮度,并使用 this.revert(); 重置亮度,我希望它
如果我使用 camanJS 在图像上应用滤镜,一切都很好,但是当我单击第二个滤镜时,它需要返回到原始图像并将其应用到该图像上,但目前它将第二个滤镜放在仍具有第一个滤镜的图像。 这是我的 html 部分
我找到了一个名为 CamanJS 的图像处理库这些示例看起来不错,所以我尝试使用它。我得到以下 html:
我正在使用 Caman JS 修改图像。我只想修改像素子集的 Alpha channel 。但是当我应用过滤器时,它会修改图像中的所有像素。关于如何修改像素子集的任何建议。我需要创建一个插件而不是过滤
我想存储由不同按钮应用的所有滤镜,然后按顺序应用到图像上。例如,如果用户单击亮度、噪点、对比度。我想存储这些过滤器,并在用户单击“应用过滤器”后。我想将它们全部应用。我尝试了以下方法: Caman('
文档说 CamanJS comes with a PHP proxy (you're welcome to add a proxy in the language of your choice) th
我有多个图像,我想将它们分别加载到一个 中元素在不同的时间点,然后使用 CamanJS 操作它们.我可以让第一张图片看起来像这样: Caman('#canvas-element', '/images
所以我有一些图像,我可以通过使用 CamanJS 插件成功地对它们应用效果。但现在我想保存这些修改后的图像并用原始图像替换它们。 文档 ( link ) 提供有关保存图像的信息。但它被视为下载提示。我
有没有办法获取CamanJS滤镜的Photoshop曲线? 例如: Caman.Filter.register("hemingway", function() { this.greyscale();
使用CamanJS,如何动态地将图像加载到 Canvas 上? 我所拥有的只是 PNG 的 Base64 编码。 我发现 CamanJS 的 API 文档一点也不完整。它甚至没有记录 this.sav
CamanJS 是一个很棒的库,用于在浏览器中进行实时图像操作。 我在预先存在的 Canvas 对象上使用 Caman。如果用户“返回”到我网站的上一个区域,然后再次前进到 Canvas ,我可能需要
所以我想使用 CamanJS 插件创建一个基于 Web 的图像编辑器,它被证明是一个爆炸,但我需要创建一个水平翻转功能,结果 CamanJS 没有方法,我是想着把Caman外面的canvas翻转过来,
我正在尝试申请 CamanJS过滤到使用 KineticJS 创建的 Canvas 。它有效: Caman("#creator canvas", function() { this.lomo(
我正在尝试使用 Electron 制作一个简单的图像查看器应用程序,并且可以编辑图像。我正在使用 CamanJS 进行图像处理效果,但我有一个小问题。当我加载包含所有图像的文件夹时,我可以滚动浏览它们
我使用Caman.js和哈瓦一个 我的页面上的元素。 如何使用 Caman.js 旋转此 Canvas ? 我找到了this但我不知道如何应用它。 最佳答案 使用这个: Caman("#canvas
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
我是一名优秀的程序员,十分优秀!