Rotate an Image in Image Source in HTML

Rotate an image in image source in html

If your rotation angles are fairly uniform, you can use CSS:

<img id="image_canv" src="/image.png" class="rotate90">

CSS:

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Otherwise, you can do this by setting a data attribute in your HTML, then using Javascript to add the necessary styling:

<img id="image_canv" src="/image.png" data-rotate="90">

Sample jQuery:

$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + deg + 'deg)';
    $(this).css({ 
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate 
    });
});

Demo:

http://jsfiddle.net/verashn/6rRnd/5/

How to rotate image in CSS/html

You can create and attach a class to the images (<img> elements) to rotate, using transform:

.rotate-180 {    -webkit-transform: rotate(180deg);        -ms-transform: rotate(180deg);            transform: rotate(180deg);}

<img src="https://placehold.it/100x100" width="100"/><img class="rotate-180" src="https://placehold.it/100x100" width="100"/>

img unwanted photo rotation

Run jhead -autorot on your JPG image. That's what I do to handle autorotation before putting my images on the web.

This will rotate the image as specified by the camera's orientation sensor, then reset the orientation flag so that it will not be accidentally rotated again.

http://www.sentex.net/~mwandel/jhead/usage.html

(Note, I never autorotate my originals, just the scaled versions as part of my script for sending them to the web.)

img tag displays wrong orientation

I forgot to add my own answer here. I was using Ruby on Rails so it might not be applicable to your projects in PHP or other frameworks. In my case, I was using Carrierwave gem for uploading the images. My solution was to add the following code to the uploader class to fix the EXIF problem before saving the file.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

Rotate Image in JavaScript with new Image()

Try this:

var image = new Image();image.src = 'http://placehold.it/350x150';document.body.append(image);image.style.transform = "rotate(90deg)";

Need help scaling and rotating an image in a viewport

The reason why it "goes together" is because the transform property can only have one origin. So if you apply multiple transformations on a single object, they will all use the same origin.

An easy solution would be to put the image in a div. Then, use the zoom on the div, and the rotate on the image for exemple so that both can have different origins.

$('#rotate').click(function(e) {  updateImage(90, 0)});
$('#zoom-in').click(function() {  updateImage(0, 0.1);});
$('#zoom-out').click(function() {  updateImage(0, -0.1);});
var zoomLevel = 1;var rotation = 0;
var updateImage = function(angle, zoom) {  zoomLevel += zoom;  var img_scale = ' scale(' + zoomLevel + ') ';
  rotation += angle;  if (rotation == 360) {    rotation = 0;  }  var str_rotation = ' rotate(' + rotation + 'deg) ';
  // Here I modified the syntax just a bit, to use JQuery methods instead of pur Javascript. I hope you are ok with it  // I modify the image rotate property, and then the div scale property  $('#sam').css('transform',str_rotation)  $('#zoom').css('transform', img_scale);}

#imageblock {  width: 300px;  height: 300px;  border: 1px solid #000000;  overflow: auto;  display: block;  overflow: hidden; /* To hide the scrollbar when you zoom in */}
#zoom {  transform:scale(1);  transform-origin:top left;}
#sam {  transform: rotate(0deg)  transform-origin: center center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="zoom-in">zoom in</button> <button type="button" id="zoom-out">zoom out</button> 
<div id=imageblock>  <div id="zoom"> <!-- I added this div -->    <img  id="sam" src="http://placekitten.com/g/250/250" />  </div></div><div>  <a id="rotate" href="#">Rotate 90 degrees</a></div>

---

Related Topics