Create, Move, and Delete Text and Images

ComPDFKit provides comprehensive methods for creating, moving, and deleting text and images.

ComPDFKit provides methods to do various operations like creating text when you are in content editor mode. You can use the mouse and keyboard to manipulate text areas on WebViewer as in Microsoft Word, you can add, copy, paste, cut, or delete text by keyboard.

const contentEditManager = documentViewer.getContentEditManager();

// Insert Text.
await contentEditManager.addParagraph(1, [240, 32, 300, 48], '', {
  fontName: 'Helvetica',
  fontSize: 14,
  color: [0, 0, 0],
  bold: false,
  italic: false,
  textAlign: 'left'
});

// Insert Image.
const imageBase64 = '...'; // Base64 format image data.
const image = new Image();
image.src = imageBase64;
await image.decode();
const canvas = document.createElement('canvas');
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
const { data } = context.getImageData(0, 0, canvas.width, canvas.height);
await contentEditManager.addImage(1, [268, 100, 308, 138], {
  width: canvas.width,
  height: canvas.height,
  pixels: data.buffer
});