Rotate and save image for JavaScript

问题

I am writing a webapp which loads the image and display on canvas (more exact, I am writing a Tizen app which uses HTML5/JavaScript).

I can load the image properly:

function loadImage(file) {
    var img = new Image();
    img.src = file;
    return img;
}

Everything works fine until I started to get images which display in wrong orientation. I figure out how to get the EXIF and orientation, and I was wondering how do I change the above function to return a proper image?

function loadImage(file) {
    var img = new Image();
    img.src = file;

    // Retrieve EXIF orientation (works fine)
    ...
    // What should I do here to rotate the img?

    return img;
}

I have been looking around and others are suggesting drawing the image rotated in canvas, but that causes a lot of problems in my calculation (where the x, y are not in 0, 0, width and height are not the same size as the canvas).

回答1:

Try this

<!DOCTYPE html>
<html>
<body>
<button id="button" value="click here!">Click Here!</button>
<div id="parentdiv">
<img id="image"                    
src="https://d13yacurqjgara.cloudfront.net/users/71134/screenshots/1020838/save-icon.png" />
</div>
<style>
#parentdiv {width:820px;height:100px;}
#parentdiv.rotate90,#container.rotate270 {width:100px;height:820px}
#image {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
}
#parentdiv.rotate90 #image {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
#parentdiv.rotate180 #image {
transform: rotate(180deg) translate(-100%,-100%);
-webkit-transform: rotate(180deg) translate(-100%,-100%);
-ms-transform: rotate(180deg) translateX(-100%,-100%);
 }
#parentdiv.rotate270 #image {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
</style>
<script>
var angle = 0, img = document.getElementById('parentdiv');
document.getElementById('button').onclick = function() {
angle = (angle+90)%360;
img.className = "rotate"+angle;
}
</script>

</body>
</html>

回答2:

Try:

img.style.transform = 'rotate(30deg)';

来源：https://stackoverflow.com/questions/34080762/rotate-and-save-image-for-javascript

标签

javascript

canvas

rotation

exif