0

我是 caman js 的新手。我想使用 caman js 编辑驻留在本地机器上的图像。我搜索了它，但找不到合适的代码。我还浏览了 caman js 的教程。链接：http ://camanjs.com/guides/ 谁能帮帮我？谢谢你。

4

2 回答 2

0

您提供的链接提供了您正在寻找的信息。如果我正确理解您的问题，这些是您需要采取的基本步骤。

  1. 确保 Camanjs 插件包含在您的项目中。
  2. 在你的工作 DOM 上有一个 img 或 canvas 元素

  3. 在 DOM 准备就绪后，通过将选择器或 DOM 元素传递给它来初始化 Camanjs。这是您提供的链接的相关代码：

    Caman("#image-id", function () {
    // Setup whatever options or image processing you want here
    // Make sure to render after
    this.brightness(5).render();
});

您的问题询问本地计算机上的文件。据我了解，您的图像必须存在于 DOM 中才能与 Camanjs 一起使用。因此，您的图像应该位于您的 html/javascript 可以找到的某个位置。（即 'img/myLocalPicture.jpg' 相对于您的 .html 文件）

对我来说，查看 Camanjs 的源代码以及查看 API 文档非常有帮助：http: //camanjs.com/api/

如果您想要更具体的答案，请重新表述您的问题以更具体。

于 2015-07-03T18:53:35.333 回答
0

您可以使用 HTML5 File API 加载文件。

如果您使用的是 JQuery，下面将允许您浏览本地文件，然后对其应用效果。（你不需要jquery，这只是HTML5的一个特性）

<html>
    <head>
        <link href="css/style.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/caman.full.min.js"></script>
    </head>
    <body>
        <img id="myimage" alt="Image go here" />
        <form>
            <input type="file" id="fileinput" />
        </form>
    </body>
    <script>
        $("#fileinput").change(function(evt) {
            var image = evt.target.files[0];
            $("#myimage").attr("src", URL.createObjectURL(image));
            processImage();
        });

        function processImage() {
            Caman("#myimage", function() {
                // Perform your effects here
            });
        }
    </script>
</html>
于 2016-04-13T16:28:12.910 回答