为JavaScript旋转并保存图像_Javascript_Canvas_Rotation_Exif

为JavaScript旋转并保存图像

javascript canvas

为JavaScript旋转并保存图像,javascript,canvas,rotation,exif,Javascript,Canvas,Rotation,Exif,我正在编写一个webapp，它加载图像并在画布上显示（更确切地说，我正在编写一个使用HTML5/JavaScript的Tizen应用程序）我可以正确加载图像： function loadImage(file) { var img = new Image(); img.src = file; return img; } 一切正常，直到我开始得到错误方向显示的图像。我想知道如何获取EXIF和方向，我想知道如何更改上述函数以返回正确的图像 function loadImag

我正在编写一个webapp，它加载图像并在画布上显示（更确切地说，我正在编写一个使用HTML5/JavaScript的Tizen应用程序）

我可以正确加载图像：

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

一切正常，直到我开始得到错误方向显示的图像。我想知道如何获取EXIF和方向，我想知道如何更改上述函数以返回正确的图像

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;
}

我一直在环顾四周，其他人建议在画布中绘制旋转的图像，但这会在我的计算中造成很多问题（x、y不在0、0中，宽度和高度与画布的大小不同）。

试试这个

<!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>


点击这里！
#parentdiv{宽度：820px；高度：100px；}
#parentdiv.rotate90，#container.rotate270{宽度：100px；高度：820px}
#形象{
变换原点：左上；/*IE 10+、Firefox等*/
-webkit变换原点：左上；/*铬*/
-ms变换原点：左上；/*IE 9*/
}
#parentdiv.rotate90#图像{
变换：旋转（90度）translateY（-100%）；
-webkit变换：旋转（90度）translateY（-100%）；
-ms变换：旋转（90度）translateY（-100%）；
}
#parentdiv.rotate180#图像{
变换：旋转（180度）平移（-100%，-100%）；
-webkit变换：旋转（180度）平移（-100%，-100%）；
-ms变换：旋转（180度）translateX（-100%，-100%）；
}
#parentdiv.rotate270#图像{
变换：旋转（270度）translateX（-100%）；
-webkit变换：旋转（270度）translateX（-100%）；
-ms变换：旋转（270度）translateX（-100%）；
}
var angle=0，img=document.getElementById（'parentdiv'）；
document.getElementById（'button'）。onclick=function（）{
角度=（角度+90）%360；
img.className=“旋转”+角度；
}

试试：

实际上，你真的需要使用

canvas

rotation。无法旋转图像本身？尝试了img.style.transform='rotate（180deg）'；似乎没有任何效果。

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