Get started with camanjs CDN

BSD-3-Clause licensed

Powerful open-source library: CamanJS - image manipulation/editing in browsers.

Tags:
  • html5
  • canvas
  • image
  • filter
  • manipulate
  • pixel
  • effects

Stable version

Copied!

How to start using camanjs CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with camanjs CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/camanjs/4.1.2/caman.full.min.js"></script>
</head>
<body>
  <button id="applyFilter">Apply Filter</button>
  <img id="inputImage" src="path/to/your/image.jpg" alt="Input Image">
  <img id="outputImage" src="" alt="Output Image">

  <script>
    const inputImage = document.getElementById('inputImage');
    const outputImage = document.getElementById('outputImage');
    const applyFilterButton = document.getElementById('applyFilter');

    applyFilterButton.addEventListener('click', () => {
      const image = new Caman('#inputImage', function() {
        this.revert(); // Reset image to its original state
        this.contrast(1); // Apply contrast filter with strength 1
        this.render(); // Render the filtered image
      });

      image.on('render', function() {
        outputImage.src = this.toDataURL(); // Set the output image source to the filtered image data URL
      });

      image.render(); // Start the filtering process
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions