<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<style>
#container {
display: inline-block;
position: relative;
}
.mask {
background: black;
opacity: 0.3;
border: 1px solid green;
150px;
height: 150px;
left: 0;
top: 0;
z-index: 22;
position: absolute;
}
</style>
</head>
<body>
<input type="file" id="imgInp">
<br>
<span id="container">
<div class="mask"></div>
<img id="tulip">
</span>
<br>
<canvas id="myCanvas" width="150px" height="150px"></canvas>
<br>
<button id="caijian" onclick="cai()">裁剪</button>
<script src="vconsole.min.js"></script>
<script>
var con=new VConsole();
var c = ""
var ctx =""
window.iiix = 0;
window.iiiy = 0;
function cai() {
caijian(window.iiix, window.iiiy)
//console.log(c.toDataURL("image/png"))
}
function ImgZoom(Id)
{
var w = Id.width;
var m = 350;
if(w < m)
{
return;
}
else
{
var h = Id.height;
Id.height = parseInt(h*m/w);
Id.width = m;
}
}
function caijian(sx, sy) {
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, sx, sy, 150, 150, 0, 0,150,150);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#tulip').attr('src', e.target.result);
var img=new Image()
img.src=e.target.result
console.log(img.naturalWidth)
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
/* $(".mask").mousedown(function () {
onMouseU55p()
onMouseDow555n()
});*/
var mask=document.getElementsByClassName("mask")[0];
function onMouseDow555n() {
mask.addEventListener("touchmove",onMouseMove,false);
onMouseU55p();
}
function onMouseU55p() {
mask.addEventListener("touchend",function(){
mask.removeEventListener("touchmove",onMouseMove);
},false);
}
mask.addEventListener("touchstart",function(e){
onMouseDow555n()
},false);
/* $(".mask").mousedown(function () {
onMouseUp()
onMouseDown()
});
function onMouseDown() {
$(".mask").bind("mousemove", onMouseMove)
}
function onMouseUp() {
$(".mask").bind("mouseup", function () {
$(".mask").unbind("mousemove", onMouseMove)
})
}*/
function onMouseMove(event) {
var top = $(this).position().top
var left = $(this).position().left
//console.log(top,left);
//边界
//left
var leftlimit = $(this).parent().width() - $(this).width();
var toplimit = $(this).parent().height() - $(this).height();
//console.log(leftlimit,toplimit);
//这里可以得到鼠标Y坐标
/* var pointX = e.pageX;screenX
var pointY = e.pageY;*/
var pointX = event.targetTouches[0].pageX;
var pointY = event.targetTouches[0].pageY;
console.log(pointX, pointY);
//父元素的坐标
var parentX = $(this).parent().offset().left;
var parentY = $(this).parent().offset().top;
console.log("父", parentX, parentY);
var realX = pointX - parentX;
var realY = pointY - parentY;
window.iiix = realX - $(this).width() / 2
window.iiiy = realY - $(this).height() / 2
console.log("实", window.iiix, window.iiiy);
var itemX = realX - $(this).width() / 2
var itemY = realY - $(this).height() / 2
if (realX >= leftlimit + $(this).width() / 2) {
itemX = leftlimit
}
if (realY >= toplimit + $(this).height() / 2) {
itemY = toplimit
}
if (realX <= $(this).width() / 2) {
itemX = 0
}
if (realY <= $(this).height() / 2) {
itemY = 0
}
$(this).css("top", itemY)
$(this).css("left", itemX)
//鼠标的位置
}
</script>
</body>
</html>