Jerruggeple
New Member
I have an app that using jquery and javascript to crop image. When I already crop image I want to send the image that I already cropped to second index. My code as below:First Index:\[code\]<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/cordova-2.2.0.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/jquery-ui-1.8.16/jquery-1.6.2.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/jquery-ui-1.9.2.custom.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/jquery-ui-1.9.2.custom.min.js"> </script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/ui-lightness/jquery-ui-1.9.2.custom.css"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/ui-lightness/jquery-ui-1.9.2.custom.min.css"></script> <script src="http://stackoverflow.com/questions/15469312/script.js"></script> <link rel="stylesheet" href="http://stackoverflow.com/questions/15469312/style.css"></head><body> <script type="text/javascript"> $(function(){ $(".frame").draggable(); }); </script> <!--<canvas id="Mystore1">Your Browser Doesn't support HTML5 Canvas</canvas>--> <div id="imgHolder"> <img src="http://stackoverflow.com/questions/15469312/Penguins.jpg" id="image"/> </div> <div class="frame"><img src="http://stackoverflow.com/questions/15469312/face.jpg" width="80" height="80" id="face" class="frames"/></div> <a href="http://stackoverflow.com/questions/15469312/index1.html" rel="external"><button id="crop">Crop Me</button></a></body></html>\[/code\]Second index: I call canvas id for store image, but It cannot store\[code\] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/cordova-2.2.0.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/jquery-ui-1.8.16/jquery-1.6.2.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/jquery-ui-1.9.2.custom.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/jquery-ui-1.9.2.custom.min.js"> </script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/ui-lightness/jquery-ui-1.9.2.custom.css"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15469312/dragable/ui-lightness/jquery-ui-1.9.2.custom.min.css"></script> <script src="http://stackoverflow.com/questions/15469312/script.js"></script> <link rel="stylesheet" href="http://stackoverflow.com/questions/15469312/style.css"> </head> <body> <canvas id="Mystore1">Your Browser Doesn't support HTML5 Canvas</canvas> </body> </html>\[/code\]This is my javascript:\[code\] $(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 imageSrc ='http://stackoverflow.com/questions/15469312/Penguins.jpg'; var imageObj=new Image(); imageObj.src=http://stackoverflow.com/questions/15469312/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);*/ 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); }); });\[/code\]