Question

<script type="text/javascript">
    $(function(){
        var rot = 0,ratio = 1;
        var CanvasCrop = $.CanvasCrop({
            cropBox : ".imageBox",
            imgSrc : "images/avatar.jpg",
            limitOver : 2
        });
        
        
        $('#upload-file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                CanvasCrop = $.CanvasCrop({
                    cropBox : ".imageBox",
                    imgSrc : e.target.result,
                    limitOver : 2
                });
                rot =0 ;
                ratio = 1;
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        });
        
        $("#rotateLeft").on("click",function(){
            rot -= 90;
            rot = rot<0?270:rot;
            CanvasCrop.rotate(rot);
        });
        $("#rotateRight").on("click",function(){
            rot += 90;
            rot = rot>360?90:rot;
            CanvasCrop.rotate(rot);
        });
        $("#zoomIn").on("click",function(){
            ratio =ratio*0.9;
            CanvasCrop.scale(ratio);
        });
        $("#zoomOut").on("click",function(){
            ratio =ratio*1.1;
            CanvasCrop.scale(ratio);
        });
        $("#alertInfo").on("click",function(){
            var canvas = document.getElementById("visbleCanvas");
            var context = canvas.getContext("2d");
            context.clearRect(0,0,canvas.width,canvas.height);
        });
        
        $("#crop").on("click",function(){
            
            var src = CanvasCrop.getDataURL("jpeg");
            //$("body").append("<div style='word-break: break-all;'>"+src+"</div>");  
            $(".container").append("<img class='img1'style='float:right;' name='image' src='"+src+"' />");
			$sr= src;
        });
        
        console.log("ontouchend" in document);
    })
	$().cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();

  formData.append('croppedImage', blob);

  $.ajax('index.php', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});
</script>

<style>
    
    .tools{
        margin-top: 20px;
        
    }
    .tools span{
        float: left;
        display: inline-block;
        padding: 5px 20px;
        background-color: #f40;
        color: #fff;
        cursor: pointer;
        margin-bottom: 5px;
        margin-right: 5px;
    }
    .clearfix {
        *zoom: 1;
    }
    .clearfix:before{
        content: " ";
        display: table;
    }
    .clearfix:after{
        content: " ";
        display: table;
        clear: both;
    }
    .cropPoint{
        position: absolute;
        height: 8px;
        width: 8px;
        background-color: rgba(255,255,255,0.7);
        cursor: pointer;
    }
    .upload-wapper{
        position: relative;
        float: left;
        height: 26px;
        line-height: 26px;
        width: 132px;
        background-color: #f40;
        color: #fff;
        text-align: center;
        overflow: hidden;
        cursor: pointer;
    }
    #upload-file{
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        width: 132px;
        height: 26px;
        cursor: pointer;
    }
</style>

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.CanvasCrop.js DEMO演示</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/canvasCrop.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.canvasCrop.js" ></script>
<div class="container">
			<form action=""role="form" method="post" enctype="multipart/form-data">
  <div class="imageBox" >
    <!--<div id="img" ></div>-->
    <!--<img class="cropImg" id="img" style="display: none;" src="images/avatar.jpg" />-->
    <div class="mask"></div>
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none">Loading...</div>
  </div>
  <div class="tools clearfix">
    <span id="rotateLeft" >rotateLeft</span>
    <span id="rotateRight" >rotateRight</span>
    <span id="zoomIn" >zoomIn</span>
    <span id="zoomOut" >zoomOut</span>
    <span id="crop" >Crop</span>
    <span id="alertInfo" >alert</span>
    <div class="upload-wapper">
               Select An Image
        <input type="file" name="upload" id="upload-file" value="Upload" />
    </div>
	<input type="submit"name="submit"></input>
  </div>
  </form>
</div>
</body>
</html>

我想先裁剪图像然后上传到数据库。我正在尝试使用php上传裁剪的图像。我在这里询问我的查询，但没有任何响应。请分享我的php代码以上传裁剪的图像，我想上传裁剪的图像映像到数据库。我正在使用jquery画布裁剪，因此我可以正确裁剪图像，但不能将其上传到数据库中。我尝试了很多方法，但没有成功。请帮帮我。给我PHP代码上传裁剪的图像。我也想使用jquery调整图像大小，我该如何满足这一需求？请引导我

如何将Jquery.canvascrop作物图像上传到数据库

0 个答案: