H5手动旋转图片版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/exif-js/2.3.0/exif.js"></script>
<title>手动旋转图片</title>
<style type="text/css">
html,
body {
height: 100%;
-webkit-overflow-scrolling: touch
}
#app {
height: 100%
}
#main {
overflow: auto
}
.flex-wrap {
display: -webkit-box;
display: -webkit-flex;
display: flex
}
.flex-con {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-vertical {
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
[v-cloak] {
display: none
}
.btn {
padding: 50px 0;
}
#main {
display: flex;
justify-content: center;
align-items: center;
}
.footer .van-row {
padding: 10px 0;
}
.footer .van-row .van-col {
text-align: center;
}
.footer .van-col .van-button {
width: 80%;
}
.van-uploader,
.van-uploader__wrapper,
.van-uploader__preview .van-image {
width: 100