Генерация картинки

Question

Генерация картинки

Рейтинг: 0Ответов: 1Опубликовано: 23.04.2023

Я делаю запрос к API и она мне возвращает объект или JSON.

Как на основе этих данных я смогу сгенерировать картинку? Например карточку погоды с 3-4 полями или результатами матча каких-то команд.

Рассматривал html-to-image и это должно сработать, но там по клику скачивание. А мне нужно что, бы сразу (самостоятельно) скачивалась в папку с проектом и я мог ее использовать.

javascript json изображения

Источник: Stack Overflow на русском

Answer 1

▲ 0

Как уже сказал aepot: Вы не можете автоматически ничего положить в папку на компе, система безобпастности не даст

Картинку можно сгенерировать с помощью canvas и его метода toDataURL

Для простоты в примере не буду реализовывать запрос к API, а просто каждый раз будут рандомные значения:

const backgroundImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4AQMAAADSHVMAAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURYjO74nP8JCGMTwAAAABdFJOU/4a4wd9AAAED0lEQVR42u3PQQEAAAQEMA30L4uXFLc1WG2WKWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYeHccIj+8AGdv9tBJ8gkbAAAAABJRU5ErkJggg==';
const generatedImageConatiner = document.querySelector('.generatedImage');

const downloadImage = async (url) => {
  return new Promise(resolve => {
    const img = new Image();

    img.src = url;
    img.crossOrigin = "use-credentials";

    img.onload = () => resolve(img);
  })
}

const getRandomText = () => (Math.random() + 1).toString(36).substring(7);

const getFakeData = async () => {
  const text1 = getRandomText();
  const text2 = getRandomText();
  
  return {text1, text2};
}

const generateImage = async () => {
  const background = await downloadImage(backgroundImageUrl);
  const data = await getFakeData();
  const text = `${data.text1} ${data.text2}`.toUpperCase();
  const canvas = document.createElement('canvas');

  canvas.width = 700;
  canvas.height = 400;
  
  const canvasMiddleX = canvas.width / 2;
  const canvasMiddleY = canvas.height / 2;

  const context = canvas.getContext('2d');

  context.drawImage(background, 0, 0);
  context.font = "40pt Calibri";
  context.textAlign = "center";
  context.fillText(text, canvasMiddleX, canvasMiddleY);

  const generatedImageUrl = canvas.toDataURL();
  const generatedImage = await downloadImage(generatedImageUrl);

  generatedImageConatiner.append(generatedImage);
}

generateImage();

.generatedImage {
  width: 700px;
  height: 400px;
}

.generatedImage img {
  width: 100%;
}

<div class='generatedImage'></div>

Генерация картинки

Ответы