行使CamanJS在Web页面上处理赏罚图像

下面的jQuery代码块处理所有了操作：

• $('input[type=range]').change(applyFilters);
•    function applyFilters() {
•   var hue = parseInt($('#hue').val());
•   var cntrst = parseInt($('#contrast').val());
•        Caman('#canvas', 'image.jpg', function() {
•       this.revert(false);
•       this.hue(hue);
•       this.contrast(cntrst);
•       this.render();
•     });
• }

applyFilters() 函数在输入范围滑块的值发生改变时都会被调用。这个函数用对应变量存储了所有范围滑块的值。为了对图像进行编辑，这些值随后会被作为参数传递到对应的过滤器。

每次我都会在应用这些过滤器时调用this.revet(false)，来时的canvas回到其原来的状态。使用revert可以确保过滤器所操作的是原来的图像，而它们的效果不会是混乱的. 传入的false参数值可以避免在图像还原过程中的间断闪烁。

值得一提的另外一个细节是即使我一次只改变了它们其中的一个值，我也会将所有的过滤器应用一遍。 这是因为用户不会希望在他们正调整色相和亮度值时看到对比度被重置。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!