Кодирование Base64 – популярный метод представления двоичных данных, включая изображения, в виде текста ASCII. Однако могут быть случаи, когда вам потребуется удалить кодировку изображения Base64 в редакторе TinyMCE. В этой статье мы рассмотрим различные методы достижения этой цели, а также приведем примеры кода.

Метод 1: извлечение и сохранение файла изображения
Один простой подход — извлечь данные изображения в кодировке Base64 и сохранить их в виде отдельного файла. Вот пример использования JavaScript:

// Assuming the Base64 encoded image string is stored in the variable 'base64Image'
// Extract the MIME type and the base64 data
const matches = base64Image.match(/^data:(.*);base64,(.*)$/);
const mimeType = matches[1];
const imageData = matches[2];
// Convert the base64 data to a Blob object
const byteCharacters = atob(imageData);
const byteArrays = [];
for (let i = 0; i < byteCharacters.length; i++) {
  byteArrays.push(byteCharacters.charCodeAt(i));
}
const byteArray = new Uint8Array(byteArrays);
const blob = new Blob([byteArray], { type: mimeType });
// Create a temporary anchor element and download the file
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'image.png';
link.click();

Метод 2: замена строки Base64 URL-адресом изображения.
Другой подход заключается в замене строки изображения в кодировке Base64 URL-адресом, указывающим на файл изображения. Этот метод требует хранения файла изображения на сервере и создания уникального URL-адреса для каждого изображения. Вот пример:

// Assuming the Base64 encoded image string is stored in the variable 'base64Image'
// Assuming you have a server endpoint that accepts the image data and returns a URL
// Send the Base64 image data to the server
fetch('/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ image: base64Image }),
})
  .then(response => response.json())
  .then(data => {
    // Replace the Base64 string with the image URL
    const imageUrl = data.url;
    tinymce.activeEditor.setContent('<img src="' + imageUrl + '">');
  });

Метод 3: используйте FileReader API
FileReader API позволяет асинхронно читать содержимое файлов. Вы можете использовать этот API для удаления кодировки изображения Base64. Вот пример:

// Assuming the Base64 encoded image string is stored in the variable 'base64Image'
// Remove the Base64 prefix
const base64Prefix = 'data:image/png;base64,';
const imageData = base64Image.replace(base64Prefix, '');
// Convert the Base64 data to a Blob object
const byteCharacters = atob(imageData);
const byteArrays = [];
for (let i = 0; i < byteCharacters.length; i++) {
  byteArrays.push(byteCharacters.charCodeAt(i));
}
const byteArray = new Uint8Array(byteArrays);
const blob = new Blob([byteArray], { type: 'image/png' });
// Read the Blob data and insert the image into the editor
const fileReader = new FileReader();
fileReader.onload = function (e) {
  const imageUrl = e.target.result;
  tinymce.activeEditor.setContent('<img src="' + imageUrl + '">');
};
fileReader.readAsDataURL(blob);

В этой статье мы рассмотрели несколько методов удаления кодировки изображений Base64 в редакторе TinyMCE. Извлекая и сохраняя файл изображения, заменяя строку Base64 URL-адресом изображения или используя API FileReader, вы можете эффективно обрабатывать данные изображения в различных сценариях. Выберите метод, который лучше всего соответствует вашим требованиям, и интегрируйте его в свое приложение.