<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><!--以手机屏幕为标准，禁止放大缩小-->
<meta name="format-detection" content="telephone=no"/><!--屏蔽IOS下自动转换数字为手机链接-->
<meta name="apple-mobile-web-app-capable" content="yes" /><!--IOS应用模式，自动隐藏默认的工具栏和菜单栏-->
<meta name="browsermode" content="application"><!--UC应用模式-->
<meta name="x5-page-mode" content="app"><!--腾讯X5浏览器应用模式-->
<title>照片旋转</title>
</head>
<body style="margin: 0;">
<input type="file" onchange="fileChangeEvent(this.files[0]);"/><br><br>
<img style="width: 100%;" src="./1.jpg"/><br><br>
<canvas style="display: none;"></canvas>
<input type="button" value="90度"/><br><br>
<input type="button" value="180度"/><br><br>
<input type="button" value="270度"/><br><br>
<input type="button" value="返回"/><br><br>
</body>
<script type="text/javascript">
var img = document.querySelector("img");
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
var imgHeight = 200;
var imgWidth = 200;
img.onload = function(){
imgHeight = img.height;
imgWidth = img.width;
}
function fileChangeEvent(file){
var URL = window.URL || window.webkitURL;
img.src = URL.createObjectURL(file);
img.onload = function(){
imgHeight = img.height;
imgWidth = img.width;
}
}
function rotate90()
{
img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题
canvas.width = imgHeight;
canvas.height = imgWidth;
context.translate(canvas.width * 0.5, canvas.height * 0.5);
context.rotate(Math.PI * 0.5);
context.translate(-canvas.height * 0.5, -canvas.width * 0.5);
context.drawImage(img, 0, 0, imgWidth, imgHeight);
img.src = canvas.toDataURL("image/png");
}
function rotate180()
{
canvas.width = imgWidth;
canvas.height = imgHeight;
context.rotate(Math.PI);
context.translate(-canvas.width, -canvas.height);
context.drawImage(img, 0, 0, imgWidth, imgHeight);
img.src = canvas.toDataURL("image/png");
}
function rotate270()
{
img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题
canvas.width = imgHeight;
canvas.height = imgWidth;
// 以中心点为基准旋转，所有的旋转只改变了 canvas 画笔的坐标轴，对画布没有任何影响
context.translate(canvas.width * 0.5, canvas.height * 0.5);
context.rotate(-Math.PI * 0.5);
context.translate(-canvas.height * 0.5, -canvas.width * 0.5);
context.drawImage(img, 0, 0, imgWidth, imgHeight);
img.src = canvas.toDataURL("image/png");
}
document.querySelectorAll("input[type='button']")[0].onclick = function(){
rotate90();
};
document.querySelectorAll("input[type='button']")[1].onclick = function(){
rotate180();
};
document.querySelectorAll("input[type='button']")[2].onclick = function(){
rotate270();
};
document.querySelectorAll("input[type='button']")[3].onclick = function(){
history.back();
};
</script>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8789.html