HTML Canvas中的图像未旋转

Question

I am creating a website in which I am showing some images. 我正在创建一个网站，其中正在显示一些图像。 I have gone through many websites and there is no result. 我浏览了许多网站，但没有结果。

HTML: HTML：

<head></head>
<body onload=init()>
    <img id="imgID" src="images/buttons/panda-wall.jpg" alt="panda wall" width="100" height="100"><br></br>
    <canvas id="myCanvas" height="400px" width="400px" style="border:1px solid"></canvas>
    <button onclick="rotateImage()">Clear canvas</button>
</body>

JavaScript: JavaScript：

function init()
{
    var c = document.getElementById("myCanvas");
    var context = c.getContext('2d');
    var img = document.getElementById("imgID");

    context.drawImage(img,0,0,c.width, c.height);
}

function rotateImage()
{
    var c = document.getElementById("myCanvas");
    var context = c.getContext('2d');
    var img = document.getElementById("imgID");

    context.save();

    // Translate
    context.translate(200, 200);

    // Scale
    context.scale(2,2);

    // Rotate it
    context.rotate(10*Math.PI/180);
    context.translate(-200, -200);
    context.drawImage(img,0,0);

    // Finally draw the image data from the temp canvas.
    context.restore();
}

Thanks in advance. 提前致谢。

Update:- I have fixed my problem with the below changes: 更新：-我通过以下更改解决了我的问题：

function rotateImage()
{
   var c=document.getElementById("myCanvas");
   var context = c.getContext('2d');
   var img = document.getElementById("imgID");

   //clear the context object rectangle.
   context.clearRect(0, 0, c.width, c.height);              

   //Save the context object.
   context.save();

   // Translate
   context.translate(c.width/2, c.height/2);

   // Rotate it with 90 degree
   context.rotate(90*Math.PI/180);

   //Translate the image on the basis of the center of the canvas.
   context.translate(-(c.width/2), -(c.height/2));

   // Draw the Image.
   context.drawImage(img,0,0, c.width,c.height);

   // Finally draw the image data from the temp canvas.
   context.restore();               
}

But still I am having issues to find the exact possition of my co-ordinates for larger images (eg width:800px and height:1280px). 但是，对于较大的图像（例如，宽度：800px和高度：1280px），我仍然找不到确切的坐标位置。 for small Images (eg width:240 and height:400) I am using the below logic for getting X and Y co-ordinate values: 对于小图像（例如，宽度：240和高度：400），我使用以下逻辑获取X和Y坐标值：

X=(Image.width/canvas.width)*current_mousePosition.X; X =（图像宽度/画布宽度）* current_mousePosition.X; Y=(Image.height/canvas.height)*current_mousePosition.Y; Y =（Image.height / canvas.height）* current_mousePosition.Y;

but this logic fails for the larger images, width and height as mentioned above. 但如上所述，对于较大的图像，宽度和高度，此逻辑将失败。 Can anyone please help me what will be the logic to get the exact co-ordinates of the current mouse position respective to the original Image. 谁能帮我获得与原始图像相对应的当前鼠标位置的精确坐标的逻辑是什么。 Is there any default logic available for all in all size images? 所有尺寸的图像都可以使用默认逻辑吗？ Any help, in terms of link or idea will be greatly appreciated. 任何帮助，无论是在链接还是思想上，都将不胜感激。 Thanks in advance 提前致谢

Answer 1

在img.onload函数中绘制它。

Answer 2

Add: 加：

var clickedTimes = 1;

And changed it in your function rotateImage : 并在您的函数rotateImage对其进行了更改：

context.rotate(clickedTimes * 10 * Math.PI / 180);

And, you can resolve it with other methods. 并且，您可以使用其他方法解决它。

HTML Canvas中的图像未旋转

问题描述

2 个解决方案

解决方案1
0 2012-11-08 00:25:26

解决方案2
0 2012-11-08 01:17:15

HTML Canvas中的图像未旋转

问题描述

2 个解决方案

解决方案1 0 2012-11-08 00:25:26

解决方案2 0 2012-11-08 01:17:15

解决方案1
0 2012-11-08 00:25:26

解决方案2
0 2012-11-08 01:17:15