Изучение различных методов создания формата URI данных изображения с помощью pdfmake

В этой статье блога мы углубимся в различные методы создания формата URI данных изображения с помощью pdfmake. Мы предоставим примеры кода для каждого метода, чтобы помочь вам понять и реализовать их в своих проектах. Создание формата URI данных изображения может быть полезно для встраивания изображений непосредственно в PDF-документы, веб-страницы или электронные письма, устраняя необходимость во внешних файлах изображений.

Методы:

  1. Метод с использованием кодировки Base64:

    const fs = require('fs');
const path = require('path');
const base64Img = require('base64-img');
const imagePath = path.join(__dirname, 'image.png');
const imageBase64 = base64Img.base64Sync(imagePath);
const imageDataURI = `data:image/png;base64,${imageBase64}`;

  2. Метод с использованием выборки узла и буфера:

    const fetch = require('node-fetch');
const fs = require('fs');
const path = require('path');
const imagePath = path.join(__dirname, 'image.png');
fetch(imagePath)
 .then((response) => response.buffer())
 .then((buffer) => {
   const imageBase64 = buffer.toString('base64');
   const imageDataURI = `data:image/png;base64,${imageBase64}`;
   console.log(imageDataURI);
 });

  3. Метод с использованием Canvas и node-canvas:

    const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');
const path = require('path');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');
const imagePath = path.join(__dirname, 'image.png');
loadImage(imagePath).then((image) => {
 ctx.drawImage(image, 0, 0, 200, 200);
 const imageDataURI = canvas.toDataURL('image/png');
 console.log(imageDataURI);
});

  4. Метод с использованием FileReader и HTML5 Canvas (только браузер):

    const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
 const file = event.target.files[0];
 const reader = new FileReader();
 reader.onloadend = () => {
   const imageDataURI = reader.result;
   console.log(imageDataURI);
 };
 reader.readAsDataURL(file);
});

  5. Метод с использованием онлайн-конвертеров URI изображений в данные.
    Доступно несколько онлайн-инструментов, которые позволяют конвертировать изображения в формат URI данных. Просто загрузите свое изображение, и инструмент сгенерирует для вас URI данных. Некоторые популярные варианты включают https://www.base64-image.de/ и https://codebeautify.org/image-to-base64-converter .

В этой статье мы рассмотрели различные методы создания формата URI данных изображения с помощью pdfmake. Мы обсудили использование кодировки Base64, выборки узлов и буфера, Canvas и node-canvas, FileReader и HTML5 Canvas, а также онлайн-конвертеров URI изображений в данные. Эти методы предлагают разные подходы в зависимости от ваших требований и среды, в которой вы работаете. Включив URI данных изображения непосредственно в ваши документы, вы можете упростить управление изображениями и повысить переносимость ваших файлов.