Tipps zum Arbeiten mit Bildern auf Webseiten mit CamanJS

Vielleicht möchten Sie fragen, warum wir eine solche JavaScript-Bibliothek verwenden sollten, da CSS bereits über vorgefertigte Funktionen zur Unterstützung grundlegender Bildoperationen verfügt.

Nun, neben der Browserunterstützung bietet die Verwendung von CamanJS viele Vorteile. Es gibt uns mehr Filter und Optionen zum Bearbeiten von Bildern. Sie können erweiterte Filter für Ihre Bilder erstellen, um jedes Pixel darin zu kontrollieren. Sie können die integrierten Mischmodi und das Ebenensystem verwenden. Außerdem können Sie domänenübergreifende Vorgänge an Bildern durchführen und die durch die Vorgänge generierten Bilder speichern.

Jetzt beginnen wir mit der Erkundung der Funktionen, die CamanJS zu bieten hat!

Notwendige Dateien einführen

Um CamanJS zu verwenden, importieren Sie einfach die Bibliothek in Ihre Seiten. Die von mir zitierte minimale CDN-Version enthält zusätzlich zur Kernfunktionalität alle Plugins in einer einzigen Datei:

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js">
</script>

Nach dem Login kopieren

Von Version 3 bis 4 hat sich die Syntax der CamanJS-Funktionen leicht geändert. Stellen Sie daher bitte sicher, dass Sie beim Befolgen dieses Tutorials für den tatsächlichen Betrieb die Version 4 oder höher importieren.

Bildmanipulation durch HTML-Attribute

CamanJS kann zum Bearbeiten von Bildern mithilfe des data-caman-Attributs verwendet werden. Der folgende Code zeigt Ihnen, wie Sie einen Filter mit einer Helligkeit von „10“ und einem Kontrast von „30“ auf ein Bild anwenden:

<img data-caman="brightness(10) contrast(30)"
   src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理">

Nach dem Login kopieren

18 weitere Filter, die mit ähnlicher Syntax angewendet werden können, sind ebenfalls in dieser Bibliothek enthalten.

Zum Beispiel:

<img data-caman="love() hazyDays()"
   src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理">

Nach dem Login kopieren

Bilder mit JavaScript bearbeiten

Sie können ein Bild auch bearbeiten, indem Sie ein paar Zeilen JavaScript schreiben. Das Ergebnis der Verwendung von JavaScript-Operationen ist dasselbe wie die Verwendung des data-caman-Attributs.

Caman('#your-image-id', function () {
 this.brightness(40);
 this.contrast(-10);
 this.sinCity();
 this.render();
});

Nach dem Login kopieren

Implementieren eines Steuerelements in einem Bildeditor

Filter können verwendet werden, um Schaltflächenklicks ohne große Anpassung auszulösen. Einige sind wie vintage(), und sinCity() Der Filter erfordert keine Parameter. Andere Filter wie „contrast()“ und „noise()“ erfordern einen ganzzahligen Wert als Argument. Dieser Wert bestimmt die Stärke des Filters.

Komplexe Filter wie TiltShift(), Posterize() und Vignette() erfordern mehr als einen Parameter. Der folgende Codeblock zeigt, wie drei Schaltflächen zum Durchführen von drei Filtervorgängen verwendet werden. Sie können solchen Code auch für andere Filter schreiben.

Das Folgende ist der HTML-Code:

<canvas id="canvas"></canvas>
<button id="vintagebtn">Vintage</button>
<button id="noisebtn">Noise</button>
<button id="tiltshiftbtn">Tilt Shift</button>

Nach dem Login kopieren

Hier ist der JavaScript/jQuery-Code, der den Filter auf Schaltflächenklicks anwendet:

var vintage = $('#vintagebtn');
var noise = $('#noisebtn');
var tiltshift = $('#tiltshiftbtn');
  vintage.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.vintage();
  this.render();
 });
});
  noise.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.noise(10);
  this.render();
 });
});
  tiltshift.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.tiltShift({
   angle: 90,
   focusWidth: 600
  }).render();
 });
});

Nach dem Login kopieren

tiltshift() akzeptiert auch zusätzliche Parameter wie startRadius und radius , Factor.vignette() hat <🎜 Für die beiden Parameter >Größe und Stärke finden Sie in der CamanJS-Dokumentation für ein detailliertes Verständnis aller Filter.

Schiebereglersteuerung implementieren

Für Filter wie

Helligkeit, Kontrast und Farbton, die eine relativ präzisere Kontrolle ihrer Werte erfordern, kann die Verwendung des Bereichswert-Eingabeschiebereglers gut funktionieren. Wie Sie sehen werden, unterscheidet sich die Implementierung eines Schieberegler-Steuerelements nur geringfügig von der eines Schaltflächen-Steuerelements. Sie können einen Bereichsschieberegler mit dem folgenden HTML-Code erstellen:

<form id="silderInput">
   <label for="hue">Hue</label>
 <input id="hue" name="hue" type="range" min="0" max="300" value="0">
   <label for="contrast">Contrast</label>
 <input id="contrast" name="contrast" type="range" min="-20" max="20" value="0">
</form>

Nach dem Login kopieren

Der folgende jQuery-Codeblock verarbeitet alle Vorgänge:

$('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();
  });
}

Nach dem Login kopieren

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

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

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

在 CamanJS 中创建定制的过滤器

这个库的许多其它特性中有一个很酷的特性就是，你可以通过创建你自己的过滤器和插件来对它进行扩展. 有两种方法可以来创建定制的过滤器。你可以用对应的值来组合内置的过滤器，或者也可以从头开始创建你自己的过滤器。

下面是创建你自己的过滤器的 jQuery 代码：

Caman.Filter.register('oldpaper', function() {
 this.pinhole();
 this.noise(10);
 this.orangePeel();
 this.render();
});

Nach dem Login kopieren

要从头开始创建过滤器，你需要一些额外的工作，这都是因为存在几个bug，你可以在 GitHub 资源库的开放问题板块读到有关这个的内容。

图层和混合模式

除了过滤器，CamanJS 还带来了一个高级的图层系统。这个东西给了你更多的图形操作能力和选择。不想 Photoshop 中的图层，CamanJS 中的层可以嵌套。它使用混合模式来将层应用到他们的上级嵌套层。默认是一般的混合模式。CamanJS 总共有十种混合模式，包含有像叠加（multiply）, 排除（exclusion）, 和覆盖（overlay）这些常用的。

如下是使用图层和混合模式创建一个定制过滤器的jQuery代码：

Caman.Filter.register('greenTint', function() {
 this.brightness(-10);
   this.newLayer(function() {
  this.setBlendingMode("overlay");
  this.opacity(100);
  this.fillColor('#689900');
  this.filter.brightness(15);
  this.filter.contrast(10);
 });
   this.render();
});

Nach dem Login kopieren

过滤器同时被应用到原来的图层和新图层. 此外，你可以为新的图层设置其它一些像不透明度（opacity）和混合模式这样的属性. 我已经用一个固定的颜色来填充了这一图层，不过你也可以通过调用 this.overlayImage('image.jpg') 来用另外一张图片对它进行填充.

操作跨域图像

如果你需要管理位于不用域名底下的图像，你可以使用 CamanJS 一并提供了的 PHP 代理。为了能使用这个特性，你需要在你的服务器上面放置这个 PHP 脚本 . 该脚本将作为代理向你的浏览器提供来自远程数据源的图像数据，以规避编辑限制。之后你需要在你的JavaScript中添加下面这一行：

复制代码代码如下:

Caman.remoteProxy = Caman.IO.useProxy('php');

保存编辑后的图像

CamanJS 内置了编辑后保存图像的机制。使用目前的实现，对 this.save(png) 的调用会打开一个文件下载的弹出框，而你将需要对文件重新命名，并添加一个png或者jpg的扩展名. 这是因为在调用这个函数时，浏览器会将图像的编码重定向到 base64，而它们不知道文件的类型. 下面给出的代码块会保存图片:

this.render(function () {
 this.save('png');
});

Nach dem Login kopieren

Demo 跟完整代码

你可以看一下这个应用了所有特性的图像编辑器样例，截图如下：

CamanJS Javascript库 Web页面图像处理

作为练习，你可以尝试改善下用户体验，如标记下当前图片上应用的滤镜或修改下保存按钮来避免需要重命名的问题。

就像我们看到的， CamanJS 是一个非常有用的图片操作库，带有很多滤镜，还有不断发展中的功能，而本教程仅仅讲述了一个皮毛。

以上内容比较长，但是介绍的都很详细，耐心阅读，对学习使用CamanJS在Web页面上处理图像很有帮助。

Tipps zum Arbeiten mit Bildern auf Webseiten mit CamanJS_jquery