<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>picker</title>
<style type="text/css">
* {margin: 0;padding: 0;}
img {display: inline-block;height: auto;}
canvas {position: fixed;top: -9999999px;left: -9999999px;}
.img-wrap {text-align: center;padding: 50px 0;}
.img-wrap img {width: 500px;}
.btn {text-align: center;}
.btn > button {margin-right: 20px;display: inline-block;}
</style>
</head>
<body>
<div id="app">
<canvas>系统版本太低</canvas>
<div class="img-wrap">
<img id="t_img">
</div>
<div class="btn">
<button type="button" onclick="changeDir('left')">往左旋转</button>
<button type="button" onclick="changeDir('right')">往右旋转</button>
<button type="button" onclick="down()">导出</button>
</div>
</div>
</body>
<script type="text/javascript">
var oc = document.querySelector('canvas');
var ctx, image, xTimes = 0;
var t_img = document.querySelector('#t_img');
if (oc.getContext('2d')) {
ctx = oc.getContext('2d');
image = new Image();
image.src = './img/cat.jpg';
image.onload = function() {
oc.width = image.width;
oc.height = image.height;
ctx.drawImage(this, 0, 0);
t_img.src = oc.toDataURL('image/jpeg');
}
}
function changeDir(_dir) {
if (_dir === 'left') {
xTimes++;
} else {
xTimes--;
}
ctx.clearRect(0, 0, oc.width, oc.height);
var temp = oc.width;
oc.width = oc.height;
oc.height = temp;
var center = {
x: Math.round(oc.width / 2),
y: Math.round(oc.height / 2)
};
console.log(center);
ctx.translate(center.x, center.y);
ctx.rotate(-90 * xTimes * Math.PI / 180);
if (xTimes % 2 !== 0) {
ctx.translate(-center.y, -center.x);
} else {
ctx.translate(-center.x, -center.y);
}
ctx.drawImage(image, 0, 0);
t_img.src = oc.toDataURL('image/jpeg');
}
function down() {
var aDom = document.createElement('a');
aDom.download = "勒是一只猫";
aDom.href = oc.toDataURL('image/jpeg', 0.7);
aDom.click();
}
</script>
</html>
