CODEWITHSUNDEEP
htmlcanvashtml5-canvas
notQ
notQ

Reputation: 239

Rezize HTML Canvas size after transformed operation

I have a webpage that let users upload image via camera and make some drawing on it. So I use html canvas to achieve the free drawing part. The problem is that some images are uploaded with wrong orientation and I therefore have to provide users with a button that let them rotate the image using canvas.

However, after a rotation of image, I do not know how to resize the canvas so that it has the same width and height just as the rotated image. Right now, I have some "blank spaces" which I mark with blue background in my code below after rotation. Please run my code below to better understand what I am trying to say here.

So my question is how to re-resize the canvas width and height after rotation so that it has the same width and height as the rotated image?

<!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>

Upvotes: 1

Views: 268

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

You can accomplish that in the following way ...

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

apology for not giving explanation

Upvotes: 1

Related Questions