Rotate an image

Question

I want to rotate an image and show the rotated image to who wants to show rotated image. i searched a lot but most of the codes rotate in the background. I want to see rotated image as soon as the click event finishes. Thanks any advance.

Harsh Shah · Answer

HTML JS var angle = 0; $('#button').on('click', function() { angle += 90; $("#image").rotate(angle); }); $('#button1').on('click', function() { angle -= 90; $("#image").rotate(angle); }); CSS #wrapper { position:absolute; top: 100px; left: 100px; max-height: 100px; min-height: 100px; }

Harshad Chirutkar · Answer

Below is C# example public void RotateFlip(RotateFlipType f) { if (FilterBitmap != null) { FilterBitmap.RotateFlip(f); } else { MessageBox.Show("Problem with Image processed","Do not mess Image",MessageBoxButtons.OK,MessageBoxIcon.Warning); } } In the above method FilterBitmap is the input Bitmap & RotateFlipType parameter must be passed to get desired result.

Laxmidhar Sahoo · Answer

"utf-8" > body { display: flex; justify-content: center; } #target { margin-top: 100px; font-family: "Helvetica Neue" , sans-serif; font-weight: 100; font-size: 150px; color: #777; -webkit-font-smoothing: antialiased; } #target:hover { color: orange; cursor: pointer; } "target" > PUT IMAGE ROTATE ME! // Generated by CoffeeScript 1.6.3 ( function () { var R2D, active, angle, center, init, rotate, rotation, start, startAngle, stop; active = false ; angle = 0; rotation = 0; startAngle = 0; center = { x: 0, y: 0 }; document.ontouchmove = function (e) { return e.preventDefault(); }; init = function () { target.addEventListener( "mousedown" , start, false ); target.addEventListener( "mousemove" , rotate, false ); return target.addEventListener( "mouseup" , stop, false ); }; R2D = 180 / Math.PI; start = function (e) { var height, left, top, width, x, y, _ref; e.preventDefault(); _ref = this .getBoundingClientRect(), top = _ref.top, left = _ref.left, height = _ref.height, width = _ref.width; center = { x: left + (width / 2), y: top + (height / 2) }; x = e.clientX - center.x; y = e.clientY - center.y; startAngle = R2D * Math.atan2(y, x); return active = true ; }; rotate = function (e) { var d, x, y; e.preventDefault(); x = e.clientX - center.x; y = e.clientY - center.y; d = R2D * Math.atan2(y, x); rotation = d - startAngle; if (active) { return this .style.webkitTransform = "rotate(" + (angle + rotation) + "deg)" ; } }; stop = function () { angle += rotation; return active = false ; }; init(); }).call( this ); "rotate.js" >

Kip Hackman · Answer

You can use LEADTOOLS Imaging Pro SDK technology in your application. https://www.leadtools.com/sdk/imaging-pro The Image Processing technologies offer the ability to clean-up images and documents. Here is some sample code: using (RasterCodecs codecs = new RasterCodecs()) { string srcFileName = @ "FILE PATH OF SOURCE IMAGE" ; string destFileName = @ "FILE PATH OF ROTATED IMAGE" ; using (RasterImage image = codecs.Load(srcFileName)) { RotateCommand command = new RotateCommand(); command.Angle = 90 * 100; command.FillColor = new RasterColor(255, 255, 255); command.Flags = RotateCommandFlags.Bicubic; command.Run(image); codecs.Save(image, destFileName, RasterImageFormat.Jpeg, image.BitsPerPixel); } }

Sanwar Ranwa · Answer

Hello Furkan Ozbek Please check these Links https://www.youtube.com/watch?v=jlIn7Vn89Io https://www.youtube.com/watch?v=S9uSKO-BIgs https://www.c-sharpcorner.com/UploadFile/75a48f/rotate-and-flip-an-image/

Amit Gupta · Answer

Image object has a function to rotate the picture, have a look https://www.c-sharpcorner.com/uploadfile/hrojasara/how-to-rotate-images-in-Asp-Net/

Rotate an image

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (6)