Canvas: Why I can't rotate an image?

This site is best viewed in a modern browser with JavaScript enabled.

nadavvin

Why This code not rotate the image?

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
ctx.rotate(30*Math.PI/180);
</script>

</body>
</html>

base on the code on:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2

Thanks
Nadav

ReFreezed

You have to call ctx.rotate() before calling ctx.drawImage() as t[FONT=verdana]he rotation only affects drawings made after the rotation has been done.[/FONT]

nadavvin

Thanks!

I need to rotate part of the image, why does it not work with putImageData?

for example:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

var imgData=ctx.getImageData(30,30,50,50);
ctx.rotate(30*Math.PI/180);
ctx.putImageData(imgData,10,70);

</script>

</body>
</html>

Thank
Nadav

ReFreezed

It's because putImageData() simply does not specifically draw anything onto the canvas - it directly puts the image data (pixels) into the canvas just as they are. I don't believe you can rotate image data.

One solution would be to redraw the part of the image you want to "copy" instead of using getImageData and putImageData. (In other words, you'd have to draw your red rectangle again in the new place after calling rotate().)

apple78

anyone here knows whether the following codes is working or not? but this is .net solution ,Im currently working thiw that.
check image rotating in .net

using RasterEdge.Imaging.Basic;
using RasterEdge.Imaging.Basic.Core;
using RasterEdge.Imaging.Processing;
using RasterEdge.Imaging.Basic.Codec;

namespace RE__Test
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

    private void button1_Click(object sender, EventArgs e)
    {
        string fileName = "c:/Sample.png";

        REImage reImage = REFile.OpenImageFile(fileName);

        ImageProcessing.ApplyRotate(reImage, 60);

        REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());
    }
}
}

danny_rough

I do this almost daily. I use an imaging sdk found on the internet which can rotate images found on the internet . Install it and it becomes a selectable processing option.Then you can rotate images in any program at all, including Adobe Acrobat . Just open the images, select rotate ,and follow the setps given in the sdk, the task will be finished in several seconds. if you haven't found a good choice , you can have a try. best wishes.