# Rotating an image in a WebProject

I’m trying to rotate an image in a web project. I’ve been following the tutorial written by @Javier_Menendez (Rotate that Picture! – Xojo Programming Blog) but I’m having trouble with it, as my rotate method is returning a picture object with nothing drawn in it.

Here’s a link to my project. I would appreciate any help figuring out what I’m doing wrong.

Thanks!
Christine

Here’s one terrible way to do it - I say it’s terrible because it’s extremely inefficient. Rather than asking Xojo to do the rotation for us, we’ll do a pixel-by-pixel copy of the image, and simply re-map the pixels with a 90º clockwise rotation onto our destination. Here’s a new version of the RotatePicture() method:

``````Public Function RotatePicture(extends sourcePicture as Picture) As Picture
//construct a destination image, swapping height and width from source
var destImage as new Picture(sourcePicture.height, sourcePicture.width)
//Loop through the source image's RGBSurface, and map the pixels
//one by on onto the RGBSurface of the destination image.
for x as integer = 0 to sourcePicture.width
for y as integer = 0 to sourcePicture.height
//This math is a bit ugly, but it just re-maps the pixels in what results as a clockwise rotation.
//Pay close attention to the swapped y and x
destImage.rgbSurface.pixel(y, x) = sourcePicture.RGBSurface.pixel(x, sourcePicture.height - 1 - y)
next
next

return destImage

End Function

``````

Other than the obvious “that’s really a slow way to do this” - are there other ways this can be improved?

Has anyone managed to get a graphics.rotate() to work correctly in any web project? That should have worked, but clearly from the provided example project it does not.

I’d love to see if there are better solutions out there…

1 Like

An interesting solution that does get the job done… but certainly not ideal. Thanks for taking the time to look over this.

// convert the WebPicture to a Picture
var originalPic as Picture = CType(PictureImageViewer.Picture, Picture)

// rotate the picture

``````var rotatedPic as new Picture(originalPic.Width,originalPic.height)
var px as new PixmapShape(originalPic)
px.Rotation = 45 /57.7
px.scale = 0.8
rotatedPic.graphics.DrawObject px,rotatedPic.Width/2,rotatedPic.height/2

MainWindow.PictureImageViewer.Picture =rotatedPic
``````

Thanks, Rudolf! I had not considered using PixmapShape, but that does indeed work.

I’ll note that I did some testing, and it turns out that rotating a pixmapshape is actually slower than just doing the straight pixel copy. For small images (512px or so in each dimension) the difference is negligible, but for larger images (say, 4000px or so in each dimension) the difference is substantial. In my testing, the direct rgb surface copy is about 2x faster on really large files.

That’s not the specific use case that Christine needs, but I thought it was worth noting.

Thanks again for the hint!

A few tweaks to

to stop it from scaling the image down and to rotate 90 degrees instead of 45 and this works as well. Thank you, @RudolfJ for your help.

Interesting, and not what I would have expected. Thanks for the data.