Add a watermark

Image

Result

Crop with watermark

Source Code

<img id="image" src="/cropperjs/picture.jpg" alt="Picture">

<script src="https://unpkg.com/cropperjs@2/dist/cropper.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    const cropper = Cropper.createCropper('#image');
    const button = document.getElementById('button');
    const result = document.getElementById('result');

    button.addEventListener('click', async function () {
      const selection = cropper.getCropperSelection();

      if (!selection) {
        return;
      }

      const croppedCanvas = await selection.$toCanvas();
      const context = croppedCanvas.getContext('2d');

      context.fillStyle = '#fff';
      context.font = '2rem serif';
      context.fillText('Powered by Cropper.js', 20, croppedCanvas.height - 20);
      const croppedImage = document.createElement('img');

      croppedImage.src = croppedCanvas.toDataURL();
      result.replaceChildren(croppedImage);
    });
  });
</script>