Question

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

$(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 = 0;
        }
        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'name='image' src='"+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');
    }
  });
});


var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

<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>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-clear"></div>
</div>
</div>
<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>
  <!---<img height="50%" width="50%" src="<?php echo $fet[1];?>"class="img-responsive;"/>-->
</div>
</body>

</html>

将裁剪的图像上传到数据库

0 个答案: