Как получить ответные данные в json после ресайза изображения на сервере?

Для получения ответных данных в формате JSON после ресайза изображения на сервере в JavaScript, можно использовать AJAX-запрос (Asynchronous JavaScript and XML).

Процесс может быть разделен на две части: клиентскую и серверную.

На сервере нужно создать скрипт, который будет принимать изображение, выполнять ресайз и возвращать результат в формате JSON. В зависимости от выбранной вами серверной технологии (например, Node.js, PHP, Python и т. д.), код может быть различным. Ниже приведен пример кода на сервере, использующего Node.js и модуль для обработки изображений sharp:

const express = require('express');
const sharp = require('sharp');

const app = express();

app.use(express.json());

app.post('/resize', (req, res) => {
  const { imageUrl, width, height } = req.body;

  sharp(imageUrl)
    .resize(parseInt(width), parseInt(height))
    .toBuffer()
    .then((buffer) => {
      const resizedImage = buffer.toString('base64');
      
      res.json({ resizedImage });
    })
    .catch((error) => {
      res.status(500).json({ error: error.message });
    });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

В данном примере мы создаем сервер Express, который принимает POST-запросы на /resize и ожидает параметры imageUrl, width и height. Затем мы используем модуль sharp, чтобы выполнить ресайз изображения, переданного по указанному URL, и возвращаем результат в виде base64-строки через JSON-ответ.

На клиентской стороне можно использовать XMLHttpRequest или fetch API, чтобы отправить AJAX-запрос на сервер и получить ответные данные в формате JSON. Ниже приведен пример клиентского кода, использующего fetch:

const imageUrl = 'https://example.com/image.jpg';
const width = 300;
const height = 200;

fetch('http://localhost:3000/resize', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ imageUrl, width, height }),
})
  .then((response) => response.json())
  .then((data) => {
    const resizedImage = data.resizedImage;
    // Делаем что-то с полученным изображением
  })
  .catch((error) => {
    console.error('Request failed', error);
  });

В данном примере мы используем fetch API для отправки POST-запроса на /resize с указанными параметрами. Затем мы преобразуем полученный ответ в JSON и обрабатываем его данные, например, отображаем ресайзированное изображение в элементе HTML.

Обратите внимание, что код на клиентской и серверной стороне может быть различным, в зависимости от выбранных технологий и инструментов. Ответ выше является примером и в нем могут быть изменения в зависимости от конкретной реализации.