Question

我有一个网页，让用户可以通过相机上传图片并在上面绘图。所以我使用<!DOCTYPE html> <html> <head> <title>Portrait</title> </head> <body> <canvas id="myCanvas"></canvas><br/> <input type="file" onchange="fileUpload(this.files)" id="file-input" capture="camera"><br/><br/> <button onclick="rotate()">Rotate</button> <script> var file, canvas, ctx, image, fileURL, rotation = 90; function fileUpload(files) { file = files[0] fileURL = URL.createObjectURL(file) canvas = document.getElementById('myCanvas') canvas.style.backgroundColor = "blue" ctx = canvas.getContext('2d') image = new Image() image.onload = function() { canvas.width = 500 canvas.height = (500 * this.height) / this.width ctx.drawImage(image, 0, 0, canvas.width, canvas.height) } image.src = fileURL } function rotate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); //save canvas state ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(rotation * Math.PI / 180); ctx.translate(-canvas.width / 2, -canvas.height / 2); ctx.drawImage(image, 0, 0, canvas.width, canvas.height); rotation += 90; ctx.restore(); //restore canvas state } </script> </body> </html>来实现免费绘图部分。问题是某些图像上传方向错误，因此我必须为用户提供一个按钮，让他们使用画布旋转图像。

但是，在旋转图像后，我不知道如何调整画布的大小，使其具有与旋转图像相同的宽度和高度。现在，我有一些＆＃34;空白＆＃34;旋转后我在下面的代码中用蓝色背景标记。请在下面运行我的代码，以便更好地理解我在这里要说的内容。

所以我的问题是如何在旋转后重新调整画布的宽度和高度，使其与旋转的图像具有相同的宽度和高度？

＆＃13;

<script>
  $( function() {
    $( "#datepicker" ).datepicker({
      showOtherMonths: true,
      selectOtherMonths: true,    
      changeMonth: true,
      changeYear: true
    });
  } );
  </script>

＆＃13;

Answer 1

您可以通过以下方式实现这一目标......

＆＃13;

var file, canvas, ctx, image, fileURL, imgWidth, imgHeight, rotation = 90, state = true;

function fileUpload(files) {
   file = files[0];
   fileURL = URL.createObjectURL(file);
   canvas = document.getElementById('myCanvas');
   canvas.style.backgroundColor = "blue";
   ctx = canvas.getContext('2d');
   image = new Image();

   image.onload = function() {
      imgWidth = image.width; //image width
      imgHeight = image.height; //image height
      canvas.width = imgWidth; //set canvas width as image width
      canvas.height = imgHeight; //set canvas height as image height
      ctx.drawImage(image, 0, 0);
   }
   image.src = fileURL
}

function rotate() {
   state = !state; //canvas state (orientation)
   if (state) { //if state is true
      canvas.width = imgWidth;
      canvas.height = imgHeight;
   } else { //if state is false
      canvas.width = imgHeight; //set canvas width as image height
      canvas.height = imgWidth; //set canvas height as image width
   }

   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.save(); //save canvas state
   ctx.translate(canvas.width / 2, canvas.height / 2);
   ctx.rotate(rotation * Math.PI / 180);
   if (state) ctx.translate(-canvas.width / 2, -canvas.height / 2); //translate depending on orientation
   else ctx.translate(-canvas.height / 2, -canvas.width / 2); // ^^
   ctx.drawImage(image, 0, 0);
   rotation += 90;
   ctx.restore(); //restore canvas state
}

＆＃13;

<canvas id="myCanvas"></canvas>
<br/>
<input type="file" onchange="fileUpload(this.files)" id="file-input" capture="camera">
<br/>
<br/>
<button onclick="rotate()">Rotate</button>

＆＃13;

^{没有给出解释的道歉}

转换后的操作后重新调整HTML Canvas大小

1 个答案: