Question

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

Answer 1

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

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

在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可以找到的位置。（即＆＃39; img / myLocalPicture.jpg＆＃39;相对于.html文件）

对我来说，查看Camanjs的源代码非常有用，同时查看API文档：http://camanjs.com/api/

如果您想要更具体的答案，请将您的问题重新定义为更具体。

Answer 2

您可以使用HTML5文件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>

如何使用Caman js实现本地机器映像？

2 个答案: