Как изменить размер и повернуть изображение одновременно с использованием холста

Question

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

Вот код, который я использую для resize, я использую меньший холст, чтобы перерисовать изображение, для вращения, я использую холст, чтобы сделать это.проблема в том, что мое изображение показывает только часть исходного изображения.как показать полное изображение?

Это исходное изображение

Это то, что я получил с кодом: вы можетевидим, что вращение было правильным, но изменение размера - нет, оно обрезает исходное изображение и оставляет только его часть.

это то, что я хочу.

const img = new Image();
img.src = 'https://i.stack.imgur.com/rzJQD.jpg';
img.onload = e => resize_and_rotate(img, 6);

function resize_and_rotate(img, orientation) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  // limit the image to at most 600px width or 900px height.
  let ratio = img.height / img.width;
  if (img.width > 600) {
    canvas.width = 600;
    canvas.height = canvas.width * ratio;
  } else if (img.height > 900) {
    canvas.height = 900;
    canvas.width = canvas.height / ratio;
  }

  let width = canvas.width;
  let height = canvas.height;
  /*
      For iPhone, landscape mode(with home key point to right) is the correct mode, it orientation is 1
      for portrait mode(home key point to bottom), the image will rotate right by 90 degree.
   */
  if (orientation === 6) { // rotate 90 degree.
    // swap canvas width and height.
    canvas.width = height;
    canvas.height = width;

    // move to the center of the canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // rotate the canvas to the specified degrees
    ctx.rotate(0.5 * Math.PI);

    // since the context is rotated, the image will be rotated also
    ctx.drawImage(img, -img.width / 2, -img.height / 2);

  } else if (orientation === 3) { // rotate 180 degree.
    // 180° rotate left
    ctx.translate(canvas.width, canvas.height);
    ctx.rotate(Math.PI);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  } else if (orientation === 8) { // rotate 90 degree, counter-clockwise.
    canvas.width = height;
    canvas.height = width;

    // move to the center of the canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // rotate the canvas to the specified degrees
    ctx.rotate(-0.5 * Math.PI);

    // since the context is rotated, the image will be rotated also
    ctx.drawImage(img, -img.width / 2, -img.height / 2);
  } else {
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  }

  // return base64 data.
//  let base64 = canvas.toDataURL("image/jpeg");
//  return base64;
  // for SO
  document.body.append(canvas);
}

canvas{max-height: 100vh; max-width: 100vw}

Если я удалю следующий фрагмент кода, результат будет правильным, но он не изменит размер моего изображения.кажется, что-то не так с размером холста?пожалуйста, помогите.

 // limit the image to at most 600px width or 900px height.
        let ratio = img.height / img.width;
        if (img.width > 600) {
            canvas.width = 600;
            canvas.height = canvas.width * ratio;
        } else if (img.height > 900) {
            canvas.height = 900;
            canvas.width = canvas.height / ratio;
        }

Answer 1

Ваша проблема заключается в drawImage .
Вы не используете достаточно аргументов и не используете там правильные значения.

После того, как вы выполнили свои преобразования (translate (center); rotate () ), вы правильно пытаетесь инвертировать перевод так, чтобы изображение было нарисовано из левого верхнего угла, как и должно быть.Однако вы используете исходный размер изображения в качестве параметров x, y вместо целевых.

Кроме того, используя версию с 3 параметрами, вы разрешаете destinationWidth и destinationHeight будут исходным размером вашего изображения, а вам понадобятся ширина и высота холста:

ctx.drawImage(img, -width / 2, -height / 2, width, height);

const img = new Image();
img.src = 'https://i.stack.imgur.com/rzJQD.jpg';
img.onload = e => resize_and_rotate(img, 6);

function resize_and_rotate(img, orientation) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  // limit the image to at most 600px width or 900px height.
  let ratio = img.height / img.width;
  if (img.width > 600) {
    canvas.width = 600;
    canvas.height = canvas.width * ratio;
  } else if (img.height > 900) {
    canvas.height = 900;
    canvas.width = canvas.height / ratio;
  }

  let width = canvas.width;
  let height = canvas.height;
  /*
      For iPhone, landscape mode(with home key point to right) is the correct mode, it orientation is 1
      for portrait mode(home key point to bottom), the image will rotate right by 90 degree.
   */
  if (orientation === 6) { // rotate 90 degree.
    // swap canvas width and height.
    canvas.width = height;
    canvas.height = width;

    // move to the center of the canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // rotate the canvas to the specified degrees
    ctx.rotate(0.5 * Math.PI);

    // since the context is rotated, the image will be rotated also
    ctx.drawImage(img, -width / 2, -height / 2, width, height);

  } else if (orientation === 3) { // rotate 180 degree.
    // 180° rotate left
    ctx.translate(canvas.width, canvas.height);
    ctx.rotate(Math.PI);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  } else if (orientation === 8) { // rotate 90 degree, counter-clockwise.
    canvas.width = height;
    canvas.height = width;

    // move to the center of the canvas
    ctx.translate(height / 2, width / 2);

    // rotate the canvas to the specified degrees
    ctx.rotate(-0.5 * Math.PI);

    // since the context is rotated, the image will be rotated also
    ctx.drawImage(img, -width / 2, -height / 2, width, height);
  } else {
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, width, height);
  }

  // return base64 data.
//  let base64 = canvas.toDataURL("image/jpeg");
//  return base64;
  // for SO
  document.body.append(canvas);
}

canvas{max-height: 100vh; max-width: 100vw}