移動端圖片裁剪解決方案

1.需求

移動端頭像裁剪功能

2.解決方案

使用jq和jcrop插件完成

3.解決思路

先把可移動的層的左上角左邊和長寬傳到后端，后端獲得這些數據之后用gd庫的函數去裁剪服務端的圖片。

 

默認要裁剪的圖片已經上傳到后台，圖片上傳的解決方案這下面鏈接

http://www.cnblogs.com/norm/p/6188318.html

 

4.具體代碼

a.引入類庫

<link rel="stylesheet" href="css/jquery.Jcrop.css">
<script src="js/jquery-1.7.2-min.js"></script>
<script src="js/jquery.jcrop.js"></script>

b.編寫html代碼

<div id="box">
<img id="element_id" src="22.jpg">    
</div>



<div class="hidden">
    <input type="hidden" id="x1">
    <input type="hidden" id="y1">
    <input type="hidden" id="x2">
    <input type="hidden" id="y2">
    <input type="hidden" id="w">
    <input type="hidden" id="h">
</div>

<button id="save">保存</button>

c.編寫css代碼

       *{
            margin: 0;
            padding: 0;
        }
        img{
            width:100%;
        }
        #box{
            overflow: hidden;
        }

d.編寫js代碼

這里注意用每次change或select的時候調用showCoords函數去更新隱藏域的值，最后把這些值ajax提交給后台

<script>

$(document).ready(function(){

     
    var jcrop_api; 
  var boundx;
     var    boundy;


     //記得放在jQuery(window).load(...)內調用，否則Jcrop無法正確初始化
    $("#element_id").Jcrop({
        onChange:showCoords,
        onSelect:showCoords,
    },function(){
      jcrop_api = this;
      var bounds =  jcrop_api.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];

             
      jcrop_api.setOptions({
          allowResize: false
        });
      jcrop_api.setOptions(  {
           minSize: [200, 200],
         maxSize: [200, 200]
        });


      jcrop_api.animateTo([0,0,200,200]);
         

    });    
 

    //簡單的事件處理程序，響應自onChange,onSelect事件，按照上面的Jcrop調用
    function showCoords(obj){
        $("#x1").val(obj.x);
        $("#y1").val(obj.y);
        $("#x2").val(obj.x2);
        $("#y2").val(obj.y2);
        $("#w").val(obj.w);
        $("#h").val(obj.h);
    }

    $('#save').click(function(){
        var x=$("#x1").val();
        var y=$("#y1").val();
        var w=$("#w").val();
        var h=$("#h").val();


        var obj={
            x:x,
            y:y,
            w:w,
            h:h
        }

        $.ajax({
          type : "POST", //默認為get  
                dataType : "json",  
                data : obj,
                url : 'test.php',  
                async: false,   
                success : function(json){
                  if(json.result=='success')
                  {
                    alert(json.message);
                  }
                }  

        })
    });


})

</script>

e.后端獲得坐標去裁剪圖片並返回數據

默認圖片的路徑是$path = 'images/5853db6605f57.jpeg'。實際中需替換成實際圖片路徑

<?php

$x = $_POST['x'];
$y = $_POST['y'];
$w = $_POST['w'];
$h = $_POST['h'];


$targ_w = 150;
$targ_h = 150;

$path = 'images/5853db6605f57.jpeg';
$img_r = imagecreatefromjpeg($path);
$dst_r = imageCreateTrueColor($targ_w,$targ_w);

$avatar_path = 'images/avatar.jpg';


imagecopyresampled($dst_r,$img_r,0,0,$x,$y,$targ_w,$targ_h,$w,$h);


imagejpeg($dst_r,$avatar_path,100);


imagedestroy($img_r);
imagedestroy($dst_r);


if(!file_exists($avatar_path))
{
    $result['message'] = "頭像保存失敗";
}
else
{
    $result['result'] = 'success';
    $result['message'] = '頭像保存成功';
}

echo json_encode($result);

 

5.總結

前端的主要工作是獲得需要裁剪的左上角坐標和長寬，具體裁剪的工作由后端負責。

 

 

參考資料:http://code.ciaoca.com/jquery/jcrop/