php – jquery – 裁切圖片
使用jquery imgAreaSelect選取要裁切的範圍
網址：http://odyniec.net/projects/imgareaselect/
並且可以設定最大範圍與最小範圍或是不限制範圍~~
以下是範例，我寫在同一張PHP，實做的時候建議分開來吧！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<? if (isset($_POST['submit'])) { //裁切圖片 function cutimg($fromimgname, $fromimg_startx, $fromimg_starty, $newimg_width, $newimg_height) { //取得目標檔案的長寬 $fromimg = imagecreatefromjpeg($fromimgname); $fromimg_info = getimagesize($fromimgname); $fromimg_width = $fromimg_info[0]; $fromimg_height = $fromimg_info[1]; //新檔案的寬高 $newimg = imagecreatetruecolor($newimg_width, $newimg_height); // 超過256色改用這個 //進行裁切 imagecopy($newimg, $fromimg, 0,0,$fromimg_startx,$fromimg_starty,$newimg_width,$newimg_height); return $newimg; } $newimg = cutimg($_POST['imgfile'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height']); header("Content-Type: image/jpg"); mb_http_output("pass"); imagejpeg($newimg); //直接顯示來TEST, 增加第2個參數可以存成圖片 die; } ?> <link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /> <script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.min.js"></script> <script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script> <script> $(function (){ $('img#photo').imgAreaSelect({ handles: true, aspectRatio : "4:3", //比例 fadeSpeed : 200, maxWidth : 200, maxHeight : 200, minWidth : 100, minHeight: 100, outerOpacity : 0.9, //指定透明度 onSelectChange: function (img, selection){ //x1, y1 為左上角座標 //x2, y2 為右下表座標 $("[name=x1]").val(selection.x1) $("[name=y1]").val(selection.y1) $("[name=x2]").val(selection.x2) $("[name=y2]").val(selection.y2) $("[name=width]").val(selection.width) $("[name=height]").val(selection.height) } }); }) </script> <img id="photo" src="Koala.jpg"> <form action="" method="post" enctype="multipart/form-data"> <input type="hidden" name="x1" value="" /> <input type="hidden" name="y1" value="" /> <input type="hidden" name="x2" value="" /> <input type="hidden" name="y2" value="" /> <input type="hidden" name="width" value=""> <input type="hidden" name="height" value=""> <input type="hidden" name="imgfile" value="Koala.jpg"> <input type="submit" name="submit" value="Submit" /> </form> |