画像を回転させて画像をトリミングできるアプリを1つ作成しました。私の最初のアプリが元の画像で始まるときは、切り抜いた画像で問題ありません。しかし、問題は、一度回転させると、トリミング ツールが画像の上、左、幅、高さを元の画像として取得できないことです。私のコードは以下のとおりです。誰でもこの問題を解決できますか? 私のコード:
<script>
$(document).ready(function($) {
$("#crop").click(function(e){
var Imgwidth = $('#face').width(),
Imgheight = $('#face').height(),
faceOffset = $('#face').offset(),
imgOffset = $('#imgHolder').find('img').offset(),
imgX1 = faceOffset.left-imgOffset.left,
imgY1 = faceOffset.top-imgOffset.top,
imgX2 =imgX1+Imgwidth,
imgY2 = imgY1+Imgheight;
var imgNval = new Array();
var imageSrc ='Penguins.jpg';
var imageObj=new Image();
imageObj.src=imageSrc;
selx1 = imgX1;
sely1 = imgY1;
selx2 = imgX2;
sely2 = imgY2;
selw = Imgwidth;
selh = Imgheight;
console.log(imgX1);
console.log(imgY1);
/*console.log(imgX2);
console.log(imgY2);*/
/*Passing from one page to another page*/
var canvas=document.getElementById("Mystore1");
var context=canvas.getContext("2d");
context.canvas.height = Imgheight;
context.canvas.width=Imgwidth;
context.drawImage(imageObj, imgX1, imgY1, selw, selh, 3, 3, Imgwidth, canvas.height-5);
});
});
</script>
<script type="text/javascript">
var loop=0;
$(document).ready(function(e) {
$("#left").click(function(){
loop+=90;
$("#imageHolder").rotate({ animateTo:loop });
});
});
$(document).ready(function(e) {
$("#right").click(function(){
loop-=90;
$("#imageHolder").rotate({animateTo:loop});
});
});
</script>
<script type="text/javascript">
$(function(){
$(".frame").draggable();
});
</script>
<canvas id="Mystore1">Your Browser Doesn't support HTML5 Canvas</canvas>
<div id="imgHolder">
<img src="Penguins.jpg" id="image"/>
</div>
<div class="frame"><img src="face.jpg" width="80" height="80" id="face" class="frames"/></div>
<button id="crop">Crop Me</button>
<button id="left">Left</button>
<button id="right">Right</button>
</body>
</html>