홈>2020-06-01 10:48source

javascript - 캔버스 이미지가 매번 90도 회전하고 180도 회전하는 방법

이미지를 클릭 할 때 이미지가 90도 회전하도록하려고하지만 180도 회전 만합니다. 클릭 할 때마다 90도 이동하려면 어떻게해야합니까?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Flipping photo in a canvas tag</title>
  <style>
    #canvas {cursor: pointer;}
       canvas {
    height: 50vh;    
    }  

    </style>
</head>
<body>  

<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />
<h1>Example of using <code>&lt;canvas&gt;</code></h1>
<p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag and then flipped.</p>
<p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</code>)</p>
<canvas id="canvas" style="border:1px red solid;"></canvas>
<a download="new-image.png" id="download">Download</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">


var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');


var img = new Image();

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    img.onload = function() {
      can.width = img.width;
      can.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      ctx.save();
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}


can.onclick = function() {
  console.log('here');
  ctx.translate(img.width - 1, img.height - 1);
  ctx.rotate(Math.PI);
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var button = document.getElementById('download');
  button.setAttribute( 'href', can.toDataURL('image/png', 1) );
};    

    </script>

    <p><a href="http://www.phpied.com/photo-canvas-tag-flip/">Blog post is here</a></p>
</body>
</html>

javascriptjqueryhtmlimagecanvas

답변 # 1
Math.PI 180 ° 회전합니다. 와이즈 비즈 n * Math.PI / 180 에 의해 회전 °. 따라서 귀하의 경우 n 에 전화해야합니다. .

코드에 문제가 있습니다. 항상 회전 중심을 움직이고 있습니다. 따라서 두 번째로 회전하면 해당 중심이 이미 원점에서 어딘가에 있습니다. 이제이 (이동 된) 점을 번역하고 회전 한 다음 그립니다. 아마도 새 이미지가 캔버스 외부에있을 가능성이 높습니다.

따라서 ctx.rotate(Math.PI/2) 를 취소해야합니다 ctx.translate(img.width - 1, img.height - 1); 와 회전 후 .

예를 보려면 여기를 참조하십시오 : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate#Rotating_a_shape_around_its_center

예 :
```
ctx.translate(-(img.width - 1), -(img.height - 1));
```
// Rotation by 90° around center at 150,75 ctx.translate(150, 75); ctx.rotate(Math.PI / 2); ctx.translate(-150, -75);

Python2.net

javascript - 캔버스 이미지가 매번 90도 회전하고 180도 회전하는 방법

관련 자료