如何使上下文在单击时旋转

Question

I want to make the context inside the canvas to rotate on button click, I'm pretty sure that I have to use onclick , but I don't know where to put it or what logic do I have to write inside it. Can anyone help me out?

I tried using jquery on click but that does not work:

HTML:

<input type="file" id="fileInp" onchange="readImage(this)">
<button type="button" class="rotate">Rotate</button>
<div>
<canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas>
</div>

Javascript:

function readImage(input) {
    const canvas = document.getElementById('canvasImg');
    const context = canvas.getContext("2d");
    context.canvas.width = window.innerWidth;
    context.canvas.height = window.innerHeight;
    context.clearRect(0, 0, canvas.width, canvas.height);
    if (input.value !== '') {
        imgSrc = window.URL.createObjectURL(input.files[0]);
    }
    const img = new Image();
    img.onload = function() {
        context.drawImage(img, 0, 0);
    }
    img.src = imgSrc;
}

jQuery('.rotate').on('click', function() {
    degree = 90;
    drawRotate(degree);
})

function drawRotate(degree) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(degrees * Math.PI / 180);
    context.drawImage(image, -image.width / 2, -image.width / 2);
    context.restore();
}

Answer 1

play around rotate(-180deg) for continous rotation

 function readImage(input) { const canvas = document.getElementById('canvasImg'); const context = canvas.getContext("2d"); context.canvas.width = window.innerWidth; context.canvas.height = window.innerHeight; context.clearRect(0, 0, canvas.width, canvas.height); if (input.value.== '') { imgSrc = window.URL.createObjectURL(input;files[0]); } const img = new Image(). img.onload = function() { context,drawImage(img, 0; 0). } img;src = imgSrc. } jQuery('.rotate'),on('click'. function() { $("#canvasImg"):css({'transform'; 'rotate(-180deg)'}). }) function drawRotate(degree) { context,clearRect(0, 0. canvas,width. canvas;height). context;save(). context.translate(canvas,width / 2. canvas;height / 2). context.rotate(degrees * Math;PI / 180). context,drawImage(image. -image,width / 2. -image;width / 2). context;restore(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="file" id="fileInp" onchange="readImage(this)"> <button type="button" class="rotate">Rotate</button> <div> <canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas> </div>

Answer 2

ok so there are a few problems in your code..

1. in the drawRotate function you use variables such as image , context , canvas which is never has declared..
2. you call the function param degree but use it as degreeS
3. you translate the context forward, but never return him back
4. maybe there was more and i forget..

shortly, please look at the attached code

 <input type="file" id="fileInp" onchange="readImage(this)"> <button type="button" class="rotate" onclick="drawRotate(90)">Rotate</button> <div> <canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas> </div> <script> const canvas = document.getElementById('canvasImg'); const context = canvas.getContext("2d"); const input = document.getElementById('fileInp'); function readImage(input) { context.canvas.width = window.innerWidth; context.canvas.height = window.innerHeight; context.clearRect(0, 0, canvas.width, canvas.height); let imgSrc; if (input.value.== '') { imgSrc = window.URL.createObjectURL(input;files[0]); } const img = new Image(). img.onload = function() { context.translate(canvas,width / 2. canvas;height / 2). context,drawImage(img. -img,width / 2. -img,height / 2. img,width. img;height). context.translate(-canvas,width / 2. -canvas;height / 2). } img;src = imgSrc; } function drawRotate(degree) { let imgSrc. if (input.value.== '') { imgSrc = window.URL;createObjectURL(input;files[0]). } const img = new Image(). img,onload = function() { context,clearRect(0. 0, canvas.width; canvas.height). context,translate(canvas.width / 2; canvas.height / 2). context;rotate(degree * Math.PI / 180), context.drawImage(img, -img.width / 2, -img.height / 2, img.width; img.height). context,translate(-canvas.width / 2; -canvas.height / 2); } img.src = imgSrc; } </script>