это я знаю, но ...
есть код
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
<script src="js/libs/jqueryui/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script><!-- http://webext.ru/fix-mousewheel/-->
<!--<link href="CSS/pic.css" rel="stylesheet" type="text/css"/>-->
<style>
#div1{
position: absolute;
top: 10px;
left: 15%;
width: 700px;
height: 700px;
border: 1px solid #c0c0c0;
box-sizing: border-box;
overflow: hidden;
}
#div2{
position: absolute;
background: aqua;
}
#div2 img{
width: 100%;
height: 100%;
}
#rotate{
background: #ffffff;
z-index: 10;
height: 700px;
-webkit-appearance: slider-vertical;
}
#crop{
pointer-events:none;
background: transparent;
position: absolute;
border: 1px #000156 solid;
box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.3);
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
z-index: 100;
}
</style>
</head>
<body>
<div id="div1">
<div id="crop"></div>
<div id="div2">
<img id="img" src="pic/up.png" alt=""/>
</div>
</div>
<div>
<input id="rotate" type="range" value="0" min="-180" max="180" step="1">
</div>
<input type="file" id="file" >
<button id="crop_button">crop</button>
<div class="cropped"></div>
<script>
var dx = 0;
var dy = 0;
var xb;
var yb;
function tr_or() {
var Cy = $('#div1').height() / 2;
var Cx = $('#div1').width() / 2;
// var hp = $('#div2').height() / 2;
// var wp = $('#div2').width() / 2;
var xx = 0;
var yy = 0;
if (!isNaN(parseFloat($('#div2').css('left'))))
xx = parseFloat($('#div2').css('left'));
if (!isNaN(parseFloat($('#div2').css('top'))))
yy = parseFloat($('#div2').css('top'));
dx = parseFloat(Cx) - xx;
dy = parseFloat(Cy) - yy;
var s = '' + dx + 'px' + ' ' + dy + 'px';
$('#img').css('transform-origin', s);
console.log($('#img').css('transform-origin'));
}
<%-- назначение пермещения --%>
$(document).ready(function () {
$('#div2').draggable({
stop: function (event, ui) {
tr_or();
}
});
});
var t = 0;
<%-- ресайз пока заглушка --%>
$('#div1').mousewheel(function (event) {
var movement = 0;
var d = 0;
var dir = event.originalEvent.wheelDelta > 0 ? true : false;
var height = parseInt($('#div2').css('height'), 10);
var width = parseInt($('#div2').css('width'), 10);
var top = parseInt($('#div2').css('top'), 10);
var left = parseInt($('#div2').css('left'), 10);
if (dir === true) {
movement = +2;
d = -1;
} else {
movement = -2;
d = +1;
}
$('#div2').css('top', top + d);
$('#div2').css('left', left + d);
$('#div2').css('height', height + movement);
$('#div2').css('width', width + movement);
});
<%-- поворот ползунком --%>
$(document).on('input', '#rotate', function () {
tr_or();
t = $('#rotate').val();
$('#img').css('transform', 'rotate(' + t + 'deg)');
});
<%-- поворот колесом мыши --%>
$('#rotate').mousewheel(function (event) {
var t = parseInt($('#rotate').val());
var d = 0;
var dir = event.originalEvent.wheelDelta > 0 ? true : false;
if (dir === true) {
d = -1;
} else {
d = +1;
}
$('#rotate').val(t + d);
$('#img').css('transform', 'rotate(' + t + 'deg)');
tr_or();
});
<%-- загрузка файла --%>
document.querySelector('#file').addEventListener('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$('#img').attr('src', e.target.result);
$('#div2').css('width', $('#div1').width());
tr_or();
};
reader.readAsDataURL(this.files[0]);
this.files = [];
});
<%-- обрезка --%>
$(document).on('click', '#crop_button', function () {
var dy = parseInt($('#crop').css('top')) - parseInt($('#div2').css('top'));
var dx = parseInt($('#crop').css('left')) - parseInt($('#div2').css('left'));
console.log($('#crop').css('top') + ' ' + $('#div2').css('top'));
canvas = document.createElement("canvas");
canvas.height = 150;
canvas.width = 150;
var context = canvas.getContext("2d");
var pic = new Image();
pic.src = $('#img').attr('src');
var H = parseFloat(pic.height);
var h = parseFloat($('#img').height());
var y = dy * H / h;
var W = parseFloat(pic.width);
var w = parseFloat($('#img').width());
var x = dx * W / w;
context.drawImage(pic, x, y, 150, 150, 0, 0, 150, 150);
pic.src = canvas.toDataURL("image/jpeg");
canvas.height = 150;
canvas.width = 150;
context.translate(75, 75);
context.rotate((parseInt($('#rotate').val()) * Math.PI) / 180);
context.drawImage(pic, -75, -75);
pic.src = canvas.toDataURL("image/jpeg");
canvas.height = 100;
canvas.width = 100;
context.drawImage(pic, 25, 25, 100, 100, 0, 0, 100, 100);
// var imageData = canvas.toDataURL("image/jpeg");
document.querySelector('.cropped').innerHTML += '<img id="cc1" src="' + canvas.toDataURL("image/jpeg") + '">';
});
</script>
</body>
</html>
при повороте изображения и последующем перемещении происходит скачок изображения ...
как избавиться от этого?
