Question

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

我可以正确加载图片：

WITH CTE1 AS
(
    SELECT ROW_NUMBER() OVER(ORDER BY (SELECT ModifyDate)) RN,* FROM DATES9
),
CTE2 AS
(
    SELECT CAST(1 AS INT) AS NRN, * FROM CTE1 WHERE RN=1
    UNION ALL
    SELECT CAST((CASE WHEN C1.HOSTNAME = C2.HOSTNAME THEN NRN ELSE NRN+1 END) AS INT) AS NRN,C1.*
    FROM CTE1 C1 INNER JOIN CTE2 C2 ON C2.RN = C1.RN-1
)
select  MAX(MODIFYDATE),HOSTNAME 
from CTE2
GROUP BY NRN,HOSTNAME
ORDER BY NRN

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

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

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

Answer 1

试试这个

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

Answer 2

尝试：

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

旋转并保存JavaScript图像

2 个答案: