移动端图片裁剪解决方案

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/