<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
<title>Document</title>
</head>
<body>
<style>
*
{
margin:0;
padding:0;
}
.content{
position:relative;
background:yellow;
}
.img
{
}
.selectContainer
{
position: absolute;
border:1px solid rgba(255,255,255,0.5);
border-radius: 50%;
}
#info
{
height:50px;
}
</style>
<div id="info"></div>
<input type="file" accept="image/*" id="selectFile" />
<div class="content" id="content">
<img alt="选择图片" class="img" id="selectImg"/>
<div class="selectContainer"></div>
</div>
<canvas id="canvas"> </canvas>
<script type="text/javascript" src="js/touch.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/hijs.js"></script>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
var sWidth = document.documentElement.clientWidth;
var sHeight = document.documentElement.clientHeight;
var imgLength =200;
var selectLength = 100;
var cssScale = "";
var cssTransform = "";
var orignImage =new Image();
var height ;
var width ;
var orignHeight;
var orignWidth;
var maxHeight;
var maxWidth;
var maxScal;
var minScal;
var maxOffx;
var maxOffY;
var offx ;
var offy ;
var cutX;
var cutY;
var currentScale=1;
var target = document.getElementById("selectImg");
$("#selectFile").change(function(){
var file = this.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload=function(){
orignImage.src=this.result;
orignHeight =height = orignImage.height;
orignWidth = width = orignImage.width;
if(height>imgLength&&width>imgLength)
{
if(height>width)
{
width = imgLength/height*width;
height = imgLength;
}
else
{
height=imgLength/width*height;
width = imgLength;
}
}else if(height>imgLength&&width<=imgLength)
{
width = imgLength/height*width;
height= imgLength;
}
else if(height<=imgLength&&width>imgLength)
{
height = imgLength/width*height;
width=imgLength;
}
$(".img").attr("src",this.result);
$(".img").width(width).height(height);
$(".img").css("margin","0 auto");
$(".img").css("display","block");
var selectBoderleft= (sWidth - selectLength)/2+"px";
var selectBoderTop = (height-selectLength)/2+"px";
$(".selectContainer").height(selectLength-2);
$(".selectContainer").width(selectLength-2);
$(".selectContainer").css("top",selectBoderTop);
$(".selectContainer").css("left",selectBoderleft);
maxScal=sWidth/imgLength;
minScal=selectLength/width;
maxOffx =(target.offsetWidth - selectLength)/2;
maxOffY =(target.offsetHeight - selectLength)/2;
$("#info").html("Y:"+target.offsetHeight);
}
})
$(function() { //放大缩小
target.style.webkitTransition = 'all ease 0.05s';
touch.on('#content', 'touchstart', function(ev) {
ev.preventDefault();
});
var initialScale = 1;
touch.on('#content', 'pinchend', function(ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > maxScal ? maxScal : currentScale; //自己调节可以放大的最大倍数
currentScale = currentScale < minScal ? minScal : currentScale; //自己调节可以缩小的最小倍数
cssScale = 'scale(' + currentScale + ')'
target.style.webkitTransform = cssTransform+cssScale;
initialScale = currentScale;
maxOffx =(target.offsetWidth*currentScale - selectLength)/2;
maxOffY =(target.offsetHeight*currentScale - selectLength)/2;
});
});
$(function() {
touch.on('#selectImg', 'touchstart', function(ev) {
ev.preventDefault();
});
var dx, dy;
touch.on('#selectImg', 'drag', function(ev) {
dx = dx || 0;
dy = dy || 0;
offx = dx + ev.x ;
offy = dy + ev.y ;
if(offy>maxOffY)
{
offy=maxOffY
}
if(offy<-maxOffY)
{
offy=-maxOffY;
}
if(offx>maxOffx)
{
offx=maxOffx
}
if(offx<-maxOffx)
{
offx=-maxOffx;
}
cssTransform = "translate3d(" + offx + "px," + offy + "px,0)";
this.style.webkitTransform = cssTransform + cssScale;
cutX = ((width*currentScale- selectLength)/2-offx)*orignWidth/width;
cutY =((height*currentScale- selectLength)/2-offy)*orignHeight/height;
selectWidth = selectLength/currentScale;
selectHeight =selectLength/currentScale;
console.log(currentScale, target,cutX,cutY,selectWidth,selectHeight);
context.drawImage(orignImage,cutX,cutY,orignWidth*selectLength/currentScale/width,orignHeight*selectLength/currentScale/height,0,0,canvas.width,canvas.height);
$("#info").html("cux="+cutX +" cutY="+cutY);
});
touch.on('#selectImg', 'dragend', function(ev) {
dx += ev.x;
dy += ev.y;
});
})
</script>
</body>
</html>