使用CamanJS创建图像编辑器：应用基本过滤器

最新推荐文章于 2024-08-25 09:20:08 发布

cunjie3951

最新推荐文章于 2024-08-25 09:20:08 发布

阅读量626

点赞数

文章标签： java javascript js css python ViewUI

本文介绍了如何使用CamanJS在JavaScript中创建图像编辑器，重点在于实现上传、下载功能以及应用内置的亮度、对比度等基本过滤器。通过HTML5 canvas，CamanJS允许对图像进行永久修改并让用户下载编辑后的图像。

摘要由CSDN通过智能技术生成

不久前，我写了一些教程，描述了如何仅使用CSS将不同类型的滤镜和混合模式应用于图像。在要显示同一图像的灰度，模糊或高对比度版本的情况下，这可能非常有用。除了创建四个不同的图像，您还可以仅使用几行CSS将这些效果应用于原始图像。

在大多数情况下，使用CSS过滤器和混合模式效果很好。但是，CSS不会修改图像本身的像素。换句话说，滤镜和混合模式或任何其他效果不是永久的。

如果有人下载了应用了CSS过滤器的图像，他们将获得原始图像，而不是修改后的版本。如果您打算为用户创建图像编辑器，这可能是一个重大挫折。

如果您希望图像修改是永久的并允许用户下载修改后的图像，则可以使用HTML5 canvas 。 canvas元素使您可以做很多事情，包括绘制线条和形状，编写文本以及渲染动画。

在本教程中，我们将专注于编辑加载到画布上的图像。 CSS3已经具有内置功能，可让您直接应用对比度，亮度和模糊效果。在使用HTML5画布时，我们将使用一个名为CamanJS的画布操作库来编辑图像。

该库支持开箱即用的基本效果，例如亮度，对比度和饱和度。这将节省时间，并使我们能够基于这些基本过滤器创建更复杂的过滤器。

CamanJS基础

该库的名称基于以下事实：该库用于在JavaScript（JS）中进行画布（人）操作。在开始使用库的其他功能之前，必须将其包含在项目中。这可以通过下载库并自己托管或直接链接到CDN来完成。

有两种使用库的方法。第一种选择是对图像元素使用data-caman属性。此属性可以接受不同CamanJS过滤器的组合作为其值。例如，如果您想将图像的亮度增加20，对比度增加10，则可以使用以下HTML：

<img src="path/to/image.jpg"
     data-caman="brightness(20) contrast(10)">

同样，您可以应用其他滤镜，例如饱和度，曝光，噪声，棕褐色等。除了基本滤镜之外，CamanJS还允许您直接使用一些更复杂的滤镜。这些滤镜可以类似的方式应用于图像。要应用sunrise过滤器，您只需使用以下HTML：

<img src="path/to/image.jpg"
     data-caman="sunrise()">

处理图像的第二种方法是通过使用渲染了图像的画布id和要应用于渲染图像的不同滤镜调用Caman() 。

Caman('#canvas-id', function () {
    this.brightness(20);
    this.contrast(10);
    this.render();
});

在本系列中，我们将采用JavaScript方式来创建图像编辑器。

实现上传和下载功能

您需要为用户提供一种上传他们想要编辑的图像的方法，以便您可以将它们呈现在画布上以进行进一步的操作。用户进行更改后，他们还应该能够下载编辑后的图像。在本节中，我们将把这两个功能添加到图像编辑器中。

让我们从添加画布和上传/下载按钮所需HTML开始：

<div class="preview-wrapper">
    <canvas id="canvas"></canvas>
    <p class="process-message"></p>
</div>

<div class="editor-buttons">
    <input type="file" id="upload-file" placeholder="Upload a Picture" />
    <label for="upload-file">Upload a Picture</label>
    <button id="download-btn">Download Image</button>
    <br/>
</div>

这是用于实现基本图像上传功能的代码：

var img = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fileName = '';

$("#upload-file").on("change", function(){
    var file = document.querySelector('#upload-file').files[0];
    var reader = new FileReader();
    if (file) {
        fileName = file.name;
        reader.readAsDataURL(file);
    }
    reader.addEventListener("load", function () {
        img = new Image();
        img.src = reader.result;
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            $("#canvas").removeAttr("data-caman-id");
        }
    }, false);
});

我们首先创建一些变量来存储用户选择的图像文件的名称以及画布的上下文。之后，我们编写代码以在触发change事件后从文件input获取图像文件。用户选择的文件存储在FileList ，我们可以使用.files[0]从列表中获取第一个文件。

拥有文件后，我们将使用FileReader对象读取用户选择的文件的内容。成功读取所选文件后，将触发FileReader的onload事件。

在FileReader对象的onload事件处理程序内，我们使用Image()构造函数创建一个HTMLImageElement实例。然后，将图像的src属性设置为FileReader的result属性的值。

图像成功加载后，我们将画布的宽度和高度设置为等于用户选择的图像的width和height 。之后，我们在画布上绘制图像，并从画布上删除data-caman-id属性。

CamanJS在设置画布以编辑图像时会自动添加该属性。我们需要在用户每次选择新文件时都将其删除，以避免我们正在编辑的旧图像文件与用户选择的新文件之间的混淆。

除了将图像文件加载到画布中之外，我们还将fileName变量的值设置为等于用户选择的文件的名称。当我们保存编辑后的图像时，这将很有用。

用户现在可以在图像编辑器中上传不同的图像。一旦他们编辑了图像，他们还想下载它们。让我们写一些代码，使用户可以保存编辑后的图像文件。

$('#download-btn').on('click', function (e) {
    var fileExtension = fileName.slice(-4);
    if (fileExtension == '.jpg' || fileExtension == '.png') {
        var actualName = fileName.substring(0, fileName.length - 4);
    }
    download(canvas, actualName + '-edited.jpg');
});

function download(canvas, filename) {
    var  e;
    var lnk = document.createElement('a');
    
    lnk.download = filename;
    lnk.href = canvas.toDataURL("image/jpeg", 0.8);
    
    if (document.createEvent) {
        e = document.createEvent("MouseEvents");
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        lnk.dispatchEvent(e);
    }
    else if (lnk.fireEvent) {
        lnk.fireEvent("onclick");
    }
}

每次为下载按钮触发click事件时，我们使用jQuery .on()方法执行一段代码。此代码从用户选择的图像文件的名称中删除文件扩展名，并将其替换为后缀-edited.jpg 。然后，此名称与对画布的引用（在其中渲染和编辑图像）一起传递给download功能。

下载功能创建一个链接并将其download属性设置为filename 。 href属性包含已编辑图像的数据URI。设置这两个属性的值后，我们以编程方式触发新创建链接的click事件。单击此按钮将开始下载编辑的图像。

应用内置过滤器

正如我在教程开始时提到的那样，CamanJS带有基本的内置过滤器。因此，您可以直接应用亮度，对比度，棕褐色，饱和度，曝光，噪声，锐化，鲜艳度和色调。某些过滤器（例如亮度和对比度）可以具有负值也可以具有正值。

您可以根据需要将值设置为高或低，但明智的选择是将其保持在-100到100之间。例如，当您将亮度设置为100时，图像会变成白色。因此，任何高于100的值都会没用。同样，如果将对比度的值设置为-100，则图像将完全变为灰色。

棕褐色，噪点，锐化和模糊等其他滤镜将仅接受正值。请记住，色相滤镜会覆盖整个360度圆，值的范围是0到100。将色相设置为0或100时，图像看起来会完全相同。

这是为我们的图像编辑器添加按钮HTML：

<div class="filter-buttons">
    <div class="filter-group">
        <button id="brightness-dec">-</button>
        <span class="filter-name">Brightness</span>
        <button id="brightness-inc">+</button>
    </div>
    <!-- More Such Buttons -->
    <div class="filter-group">
        <button id="gamma-dec" class="disabled">-</button>
        <span class="filter-name">Gamma</span>
        <button id="gamma-inc">+</button>
    </div>
</div>
<div class="editor-buttons">
    <input type="file" id="upload-file" placeholder="Upload a Picture" />
    <label for="upload-file">Upload a Picture</label>
    <button id="download-btn">Download Image</button>
    <br/>
    <button id="vintage-btn">Vintage</button>
    <!-- More Such Buttons -->
    <button id="lomo-btn">Lomo</button>
</div>

所有过滤器（如亮度和对比度）均已设置了增加和减少按钮。但是，对于某些滤波器（例如噪声），减小按钮已被禁用，因为它们不能具有有意义的负值。

我们将在以下JavaScript的帮助下基于单击的按钮应用相应的过滤器。

/* Similar Code for All Other Buttons */

$('#brightness-inc').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.brightness(10).render();
    });
});

$('#brightness-dec').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.brightness(-10).render();
    });
});


/* Similar Code for All Inbuilt Filters */

$('#nostalgia-btn').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.nostalgia().render();
    });
});

$('#majestic-btn').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.herMajesty().render();
    });
});

对于增加和减少按钮，过滤器的强度取决于其效果的缩放比例。例如，亮度和对比度增加了10，但是每次单击后，伽玛值仅增加了0.1。

以下CodePen演示显示了我们实际使用的CamanJS图像编辑器。

一些过滤器可能需要一些时间才能看到其最终结果。在这种情况下，用户可能会认为过滤器不起作用。我们将使用事件来使读者了解过滤器的进度。所有这些都将在下一个教程中讨论。