Question

I'm trying to upload an image to a temporary folder for editing (crop) image and create an avatar with the selected, but not working.

The button load should charge the image, once loaded should be displayed in: but it does not. I'm doing wrong.

Note: if the image is static, if it works. but I need upload with button for make dinamic.

from there, I intent generate a preview of the selection of the image with cropper. for see the result end of selected

after I get the values of the cropper intent create a new json format, to send and save the data in the database.

but I do not get !. someone can guide me!.

I have not worked with these technologies, so it is, I not understand how upload. and save in database the path and the image crop!.

Note: the image crop, will be stored in a folder, the original is not stored, it is only necessary to crop!.

thanks for your suggestions!.

this is the plugin: https://github.com/fengyuanchen/cropper

that, better than pediar helps people experienced in these technologies, Thank you for your help !.

This is my code!. ------ Perhaps this bad my code, so I need, that guide me, or show me, how to do or should do. thanks ----------

Start the code!

<!DOCTYPE html>
<html>
<head>
 <title>TEST DEMO UPLOAD</title>
    <script src="jquery/jquery-2.1.4.min.js"></script><!-- jQuery is required -->
        <link  href="css/cropper.min.css" rel="stylesheet">
        <link  href="css/cropper.css" rel="stylesheet">
         <link  href="css/cropper.css" rel="stylesheet">
    <script src="javascript/cropper.min.js"></script>
    <style>
      .img-container img {
            width: 400px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="columns">
        <div class="img-container">
        <img id="My_Image" alt="Picture Uploaded, To Crop" class="cropper" src="#">
        </div>
        <div class="columns">
            <div class="previews ">
                <div class="img-preview preview-lg">
                </div>
            </div>
        </div>

        the cropper JQuery info: https://github.com/fengyuanchen/cropper 
    <p>Example Upload and Crop with Cropper JQuery Plugins And Previews </p>
    <form id="form" action="Demomode.php" method="post" enctype="multipart/form-data">
        <lobel>Select image a Upload:</lobel>
            <input type="file" id="Upload" name="Up" >
            <input type="submit" value="Upload Image" name="submit">
    </form>
    <div>
        <label id="image-data"></label>
    </div>
<body>
</html>
    <script>

    // make references to file to charge in temp folder for edit with cropper    
    $('#Upload').click(function (){
          var cp = $('#My_Image > img').cropper({
          preview: ".img-preview", // A jQuery selector string, add extra elements to show preview.
          aspectRatio:4/4,
          strict:true,
          background:false,
          guides:false,
          autoCropArea:0.6,
          rotatable:false,
          crop: function(data){

          //create the preview of image original
                $('.img-preview').cropper({
                  preview: ".img-preview",
                  aspectRatio:1/1,
                  strict:true,
                  });

              //get data of part crop and send in format json for send to database
              if(data.height < 100 || data.width < 100){
              }else{
                  var json = [
                      '{"x":' + data.x,
                      '"y":' + data.y,
                      '"height":' + data.height,
                      '"width":' + data.width + '}'
                  ].join();
                  $().val(json);
              }

              // Send data of the image crop for save in database
                       $.ajax({
                        type:'POST',
                        url: $(this).attr('action'),
                        data:json,
                        cache:false,
                        contentType: false,
                        processData: false,
                        success:function(data){
                            console.log("success");
                            console.log(data);
                        },
                        error: function(data){
                            console.log("error");
                            console.log(data);
                        }
                        });

          }
        });
    </script>

Answer 1

上面发送JSON对象到数据库的代码只发送cropper组件的坐标，以便服务器端的PHP可以对图像进行实际裁剪。这就是整个事情的运作方式。

所以，如果我是你，我会看看

http://www.jqueryscript.net/other/jQuery-Client-Side-Image-Cropping-Plugin-with-Canvas-CSS3-SimpleCropper.html

他们的插件更容易。初始化。将Base64发送到服务器。在服务器端转换。中提琴！

How Crop image with fengyuanchen/cropper and save in database the path of image crop?

Start the code!

1 个答案: