0

Есть функция поворота изображения в canvas:

const rotate = async (base64, angle, color) => {
  const img = new Image()
  img.setAttribute('src', base64)
  await (() => { return new Promise((resolve, reject) => { img.onload = function() { resolve() } }) })()
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext("2d")
  ctx.fillStyle = color
  ctx.fillRect(0,0,canvas.width,canvas.height)
  ctx.translate(canvas.width/2,canvas.height/2)
  ctx.rotate(angle * Math.PI/180);
  ctx.drawImage(img,-canvas.width/2,-canvas.height/2);
  return canvas.toDataURL('image/png')
}

Работает в целом хорошо, только обрезает края повернутого изображения, например: источник

поворот

введите сюда описание изображения

Можно ли это как-то исправить? Вероятно нужно как-то высчитывать новую высоту/ширину canvas'a, но я не знаю формулы

3
  • ширина = старой высоте, высота = старой ширине
    – MBo
    3 фев 2021 в 10:28
  • ну углы могут быть не только прямые. например 1-89 градусов 3 фев 2021 в 10:29
  • добавил 3 картинку для ясности 3 фев 2021 в 10:31

1 ответ 1

5

Описывающий прямоугольник (bounding box) после поворота исходного прямоугольника имеет размеры:

New_Height = Old_Width * Abs(Sin(Fi)) + Old_Height * Abs(Cos(Fi))
New_Width = Old_Width * Abs(Cos(Fi)) + Old_Height * Abs(Sin(Fi))

введите сюда описание изображения

1
  • @Ивашка Вопрос решён?
    – MBo
    5 фев 2021 в 7:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.