Html5移动端上传图片并裁剪 - Clipic.js

Posted 2023-04-07

参考技术A

Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸，用原生js开发的，轻量级，包含html跟css，不到8kb。点此链接体验： https://teojs.github.io/clipic/

https://github.com/teojs/clipic

参数说明

width:Number (默认：500) – 裁剪宽度
height:Number (默认：500) – 裁剪高度
ratio:Number (可选) – 裁剪的比例，当传入ratio时width/height将无效
src:String (必传) – 需要裁剪的图片，可以是图片链接，或者 base64
type:String (默认：jpeg) – 裁剪后图片的类型，仅支持 jpeg/png 两种
quality:Number (默认：0.9) – 压缩质量
buttonText:Array (默认：[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

移动端图片裁剪解决方案

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/