标签: camanjs

如果我有一个我应用过滤器的图像,例如Lomo过滤器,是否有办法使当前的Caman实例？

意思是,如果我然后想要对我应用滤镜的图像上的亮度进行播放,并使用this.revert();重置亮度,我希望它恢复到画布上,我刚才应用了滤镜.

这可能吗？

我在尝试应用多种效果时遇到了噩梦,只有一次效果(预设过滤器除外),并通过...

CamanJS是一个很棒的库,用于在浏览器中进行实时图像处理.

我在预先存在的画布对象上使用Caman.如果用户"返回"到我网站的上一个区域然后再次进入画布,我可能需要更改该画布上的图像.

Caman似乎缓存了它收到的第一个图像数据,然后将画布"锁定"到它的上下文.在应用Caman后尝试更改画布会导致画布没有可见的更改.

我们如何在Caman之外更改画布数据然后重新应用Caman过滤器？

我在移动设备（例如iPad和iPhone的Safari / Chrome）上运行CamanJS脚本时遇到问题，而且我已经尝试了好几天了。

测试脚本非常简单：1）接受浏览器选择的图像文件2）使用FileData获取图像源，然后将其绘制到画布中，然后实例化Caman（“＃sample”）对象3）运行一些过滤器（在该图像的onLoad，或通过单击按钮手动进行）

它在所有桌面浏览器上都可以正常工作，并且过滤器也已成功应用，但是当我在iOS Safari等移动设备上尝试使用该实例时，当我尝试实例化Caman对象时，我现有的画布#sample变为空白并恢复为原始状态canvas默认的背景颜色，完全不加载任何图像。我尝试在画布上绘制图像，图像onLoad或在成功绘制画布图像后按需实例化Caman对象，但是最终结果仍然相同-画布变为空白。

以下是我的示例代码，有人可以建议吗？多谢您的协助。

<script>
var caman = null;

function handleUpload(evt) {
    var target = (evt.target) ? evt.target : evt.srcElement;
    var files = target.files; // FileList object
    var field = target.id;
    var curCount = target.id.replace(/\D+/, "");

    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                renderImage(e.target.result);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

function renderImage(imagedata) {
    var canvas = document.getElementById("sample");
    var ctx = canvas.getContext("2d");

    // …

我正在使用CamanJS插件将效果应用于图像,我想知道如何应用此处找到的lomo,sin city,cross process等预设效果.CamanJS的文档没有详细说明.

我尝试了下面的代码来应用晕影效果,但没有成功.

Caman("#effects", function () {

        this.resize({width: 650,height: 400
         });
         this.vignette();
        this.render();

            });

我试图理解 中的事件camanjs，但我需要一些例子。每个人都可以给我写一个简单的例子：

1）加载图像到canvas（完成）

Caman("#canvas-img2", base64_or_path_to_image, function () {
    this.nostalgia();
    this.render();
});

2）监听结束过滤，for callbackwiththis.toBase64()

在文档中，我找到了事件页面，但不明白它是如何工作的。

我想用原始图像创建拼图图像,这意味着将图像切割成9个(3x3)然后随机洗牌并存储为新图像.有谁知道哪种方法是最好的,以及如何实现它？或许与CamanJS？有没有人有示例代码？

我想使用caman js和fabric js来实现图像效果.我试图结合代码,但它给出了两个图像而不是一个.我该怎么做才能结合caman js和fabric js并解决这个问题？我参考:http://camanjs.com/和http://fabricjs.com/articles/ 谢谢.

如果我使用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的画布,用于显示图像,我有一个列表,其中包含不同的过滤器,如果点击则会触发以下javascript部分:

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

var filters = $('#filters li a');
//    originalCanvas …

我正在使用Caman JS来操作模型Item的编辑视图中的图像.

$('#vintage').click(function() {
  Caman("#preview_image", function () {
    this.reset();
    this.crossProcess(100)
    this.render(function () {
      this.addClass('selected');
    });
  });
});

Caman JS为我提供了获取Canvas对象的base64值的选项

var dataURL = this.toBase64();

但是我现在有点不知道如何处理这些信息.理想情况下,我想在提交我的rails表格时覆盖原始图像.

任何建议都会很棒.

我使用Caman.js和 hava

<canvas> 

我页面上的元素。

如何使用 Caman.js 旋转此画布？

我找到了这个，但我不知道如何应用它。