图片裁切上传插件cropper的使用

<link rel="stylesheet" href="../dist/cropper.css">
<script src="../dist/cropper.js"></script>

<div class="content-wrap">
    <h4 class="uploadPicTitle">上传头像</h4>
    <div class="box">
        <div class="preview-wrap">
            <div class="title">裁切预览</div>
            <div class="preview-img-wrap">
                <img src="" alt="" id="imga" class="preview-img-big" />
            </div>
            <div>150 * 150</div>
        </div>
        <div class="img-wrap">
            <img src="../dist/imgs/online-people1.png" alt="" id="img" />
        </div>
    </div>
    <div class="btn-wrap">
        <input type="file" id="file" style="position:absolute;clip:rect(0,0,0,0)" />
        <label for="file" class="btn btn-primary" style="margin-right:20px;">选择图片</label>
        <button class="btn btn-success">上传图片</button>
    </div>
</div>

<style>
    .uploadPicTitle{line-height:35px;border-bottom:1px solid #ccc;font-weight:bold;}
	.content-wrap{width:1000px;}
	.box{height:400px;margin-bottom:20px;}
	.img-wrap{margin-right:300px;height:100%;background:#f6f6f6;text-align:center;position:relative;}
	#img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;}
	.preview-wrap{width:280px;float:right;height:100%;background:#f6f6f6;text-align:center;}
	.preview-wrap .title{font-weight:bold;height:35px;line-height:35px;padding:0 10px;text-align:center;margin-top:15px;}
	.preview-img-wrap{width:150px;height:150px;border:1px solid #ccc;margin:0 auto;margin-bottom:15px;margin-top:15px;}
	.preview-img-big{width:100%;}
</style>

<script>
var image = document.getElementById('img');
var cropper, canvas;
$('#file').change(function(e) {
    if (cropper) {
        cropper.destroy();
    }
    var file;
    var files = e.target.files;
    if (files && files.length > 0) {
        file = URL.createObjectURL(files[0]);
        $('#img').attr({ 'src': file })
    }
    cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        background: false, //是否显示网格背景
        zoomable: false, //是否允许放大图像
        guides: false, //是否显示裁剪框虚线
        crop: function(event) { //剪裁框发生变化执行的函数。
            canvas = cropper.getCroppedCanvas({ //使用canvas绘制一个宽和高200的图片
                width: 200,
                height: 200,
            });
            $('#imga').attr("src", canvas.toDataURL("image/png", 0.3)) //使用canvas toDataURL方法把图片转换为base64格式
        }
    });
})

$('button').click(function() {
    var file = dataURLtoBlob($('#imga').attr("src")); //将base64格式图片转换为文件形式
    var formData = new FormData();
    var newImg = new Date().getTime() + '.png'; //给图片添加文件名   如果没有文件名会报错
    formData.append('file', file, newImg) //formData对象添加文件
    $.ajax({
        type: "POST",
        //url: url + "/res/upload",
        url: "upload.php",
        data: formData,
        processData: false, // 不处理数据
        contentType: false, // 不设置内容类型
        success: function(data) {
            //console.log(data)
            alert("上传成功")
            //var data = JSON.parse(data); 如果后台传过来是Json格式的文件  不需要再次转换,转换的话会报错
            var data = data;
        }
    })
})


// 将base64格式图片转换为文件形式
// data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAA
// atob 是ASCII 转换成 binary（二进制）btoa是二进制转换成ASCII
// Uint8Array 8位无符号整数类型
// Blob是类文件对象
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    //[u8arr] [] 不能省略
    return new Blob([u8arr], { type: mime });
}
</script>

<?php
// 允许上传的图片后缀
header("Content-type: text/html; charset=utf-8");
$allowedExts = array("gif", "jpeg", "jpg", "png", "pdf", "txt");
$temp = explode(".", $_FILES["file"]["name"]);
//获取文件对象，键名为name属性或者key
//Array ( [file] => Array ( [name] => 居中.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\php8C86.tmp [error] => 0 [size] => 9742 ) )
print_r($_FILES);
print($_FILES["file"]["name"]);
echo '<br>';
print($_FILES["file"]["type"]);//application/pdf
echo '<br>';
$extension = end($temp);     // 获取文件后缀名
print($extension);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "application/pdf")
|| ($_FILES["file"]["type"] == "text/plain")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
//&& ($_FILES["file"]["size"] < 204800)   // 小于 200 kb
&& in_array($extension, $allowedExts))
{
  if ($_FILES["file"]["error"] > 0)
  {
    echo "错误：: " . $_FILES["file"]["error"] . "<br>";
  }
  else
  {
    echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
    echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
    echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
    
    // 判断当期目录下的 upload 目录是否存在该文件
    // 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
    if (file_exists("upload/" . $_FILES["file"]["name"]))
    {
      echo $_FILES["file"]["name"] . " 文件已经存在。 ";
    }
    else
    {
      // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
	  $name=iconv("UTF-8", "gbk",$_FILES["file"]["name"]);
      //move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . "lily".".".$extension);
	  move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" .$name);
      echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
    }
  }
}
else
{
  echo "非法的文件格式";
}
//在使用move_uploaded_file时，路径upload/，一定要先建立upload的文件夹，否则出错
?>