圖片裁切上傳插件cropper的使用

圖片上傳格式通常是文件格式和base64格式，比較方便的是圖片格式，後臺能夠方便的處理上傳的圖片。

查看效果

首先引入cropper的樣式和js

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

 HTML結構

<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>

css樣式 

<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>

js 代碼 

<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接收就按表單提交方式的接收

<?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的文件夾，不然出錯
?>