图片裁剪并保存到服务器

[ 原创 ] 图片裁剪并保存到服务器

栏目：笔记作者：teemo 阅读：（12906）更新于：2015-09-29 07:30

在项目中写到会员模块的时候肯定会用到会员头像剪裁的，而在线剪裁就是必须的了。在线剪裁的是base64的值，怎么处理成图片呢？

需求分析：在会员模块的时候，我们不会也不可能把用的头像存在服务器然后再给他剪裁，所以我们需要在线剪裁，然后直接保存那个剪裁之后的图片的。

问题：图片剪裁之后是base64位的进制码，我们不可能也不方便存储在数据库里。

解答：网上找了一些在线剪裁的比如：http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin

这样的工具很多的，这里的话我用的是一个比较简洁的：cropbox

首先需要使用这个插件的话，依赖一个JQ，然后就可以了。样式的话需要自己去调整的。

一般这样的插件处理之后的图片的话是base64进制的文件，直接存入数据库的话问题比较多，于是我在网上找了下，原来PHP的自带函数里面就有这个函数

base64_decode

我们需要转义之后的进制码写入一个png或者jpg这样的文件就行，而且写入文件PHP也给我们提供了函数

file_put_contents

下面的写上自己的代码，不足之处，请留言告诉我，谢谢。

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>会员头像剪裁</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <style type="text/css">
            .action{width: 400px;height: 30px; margin: 10px 0;}
            .cropped > img{  margin-right: 10px;  }
            .imageBox{ position: relative;height: 400px; width: 400px; border:1px solid #aaa;background: #fff; overflow: hidden; background-repeat: no-repeat; cursor:move;}
.imageBox .thumbBox{ position: absolute;top: 50%; left: 50%;width: 200px; height: 200px;margin-top: -100px; margin-left: -100px; box-sizing: border-box;border: 1px solid rgb(102, 102, 102);box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);background: none repeat scroll 0% 0% transparent;}
.imageBox .spinner{position: absolute;top: 0; left: 0;  bottom: 0; right: 0; text-align: center; line-height: 400px;  background: rgba(0,0,0,0.7);}
        </style>
    </head>
    <body>
        <div class="container">           
            <div class="demo">
                <h2 class="title">会员头像变更</h2>
                <a href="{:U('User/Index/index')}">返回首页</a>
                <div class="cropped"></div>
                <input type="file" id="file" style="width: 250px"/>
                <div class="imageBox">
                    <div class="thumbBox"></div>
                    <div class="spinner" style="display: none">Loading...</div>
                </div>
                <div class="action">
                <span id="msg"></span>
                    <input type="button" id="btnCrop" value="完成"/>
                </div>
            </div>
        </div>
        <script src="__PUBLIC__/Js/jquery-1.11.0.js"></script>
        <script src="__PUBLIC__/Js/cropbox-min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(window).load(function() {
                var options = {
                    thumbBox: '.thumbBox',
                    spinner: '.spinner',
                    imgSrc: '/Public/Images/avatar.png'
                }
                var cropper = $('.imageBox').cropbox(options);
                $('#file').on('change', function() {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        options.imgSrc = e.target.result;
                        cropper = $('.imageBox').cropbox(options);
                    }
                    reader.readAsDataURL(this.files[0]);
                    this.files = [];
                })
                $('#btnCrop').on('click', function() {
                    var img = cropper.getDataURL();
                    //console.log(img);
                    $('.cropped').append('<img src="' + img + '"/>');
                    $.ajax({
                    type:"post",
                    url:"/User/Photo/img",
                    async:true,
                    data:{"head": img},
                    success:function(data){
                    location.href="/User/Index/index";
                    }
                    });
                })
            });
        </script>
    </body>
</html>

我是本地虚拟主机测试的，如果是2级目录的话，还是建议开启虚拟主机开发的，开启虚拟主机的话，我博客也有文章的。

上面的代码我是把JS文件放在Public/Js下这个，根据自己调整，最后我会打包给出下载地址的。

ajax的提交地址的话，根据自己的需求变动，我提交到 User/Photo/img 这个方法

//头像处理
public function img(){
$id = session('uid');
$head = I('post.head');
$time = time();
$s = base64_decode(str_replace('data:image/png;base64,', '', $head));
file_put_contents('head/'.$time."_".$id.'.png',$s);
//var_dump($head);die;
if(M('userinfo')->where("useid = $id")->save(array("head"=>"/head/".$time."_".$id.".png"))){
$this->ajaxReturn(array('error'=>0));
}else{
$this->ajaxReturn(array('error'=>1));
}
}

为了保证上传的时候，名字可以同步存入数据库，我用中间时间戳加上用户名的唯一标示来区分。

JS下载地址：http://pan.baidu.com/s/1c05A2S4

非特殊说明，本文版权归青春博客所有，转载请注明出处.

本文标题：图片裁剪并保存到服务器

本文网址：.

本文标签：裁剪

上一篇： PHP一道笔试题...

下一篇：邮件绑定会员信息...