Pixo API: Watermark

Example of watermark setup using Pixo Editor API.

by pixoeditor

HTML

<script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script>
<p>
  Upload an image: <br />
  <input type="file" id="file" />
</p>
<p>
  Or paste URL: <br />
  <input type="text" id="url" />
</p>

CSS

body { 
  height: 450px;
  max-height: 100vh;
}

img { max-width: 100% }

JavaScript

// General function that opens Pixo on file/url input
const openPixo = (src) => {
  new Pixo.Bridge({
    apikey: "26uqyj79pdgk",
    type: "modal",
    // We need the best possible quality for the text
    output: { quality: 1 },
    // We will hook on before image save.
    // To do that we need to define our own custom Save action.
    // In this action we will insert our watermark text
    // and will call the `saveAndClose` method.
    actions: [
      {
        caption: 'Save',
        icon: 'download',
        onClick: function () {
        	// Add the watermark text to the image before the save
          this.exec('ADD_TEXT', {
            text: 'Pixo Editor',
            fontFamily: 'Pacifico',
            fill: 'rgba(0, 255, 0, 0.5)',
            // This will make the Text box take 95% of the image,
            // ensuring that the text fits on one line.
            width: 0.95,
            // This will force the font size to be always
            // 5% of image's height.
            height: 0.05,
            position: 'bottom-right',
            offset: { x: 20, y: 20 }
          }).then(() => {
          	// Save the image after the text watermark is inserted.
            this.saveAndClose(function (output) {
              document.body.appendChild(output.toImage());
            });
          });
        }
      },
      // Add the default Undo, Redo and Close actions to the menu.
      ...Pixo.ACTIONS_MENU.slice(1)
    ],
  }).edit(src);
};

file.onchange = (e) => {
  // read the image as base64
  const fileReader = new FileReader();
  fileReader.onload = (e) => {
    openPixo(e.target.result);
  };
  fileReader.readAsDataURL(e.target.files[0]);
};

url.onchange = (e) => {
	openPixo(e.target.value);
}