移动端图片裁剪解决方案

wyy 2021年02月16日编程语言 414 0

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/

IT源码网前端 HTML5

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐