如何使用fengyuanchen/cropper裁剪图像，并在数据库中保存图像裁剪的路径

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

本文关键字：裁剪 图像 数据库 保存 路径 fengyuanchen 何使用 cropper      更新时间：2023-09-26

我正在尝试将图像上传到临时文件夹进行编辑(裁剪)

按钮加载后应加载图像，加载后应显示在:但事实并非如此。我做错了。

注意:如果图像是静态的，如果它工作。但我需要上传按钮，使动态。

从那里，我打算用裁切器生成图像选择的预览。要查看所选

的结果结束

后，我得到的cropper意图的值创建一个新的json格式，发送和保存在数据库中的数据。

，但我不明白!有人能给我指路吗?

我没有使用过这些技术，原来如此，我不明白怎么上传。并在数据库中保存路径和图像裁剪!

注意:图片裁剪后，会保存在一个文件夹中，原图不保存，只需要裁剪即可。

谢谢你的建议!

这是插件:https://github.com/fengyuanchen/cropper

，比pediar更好地帮助人们体验这些技术，谢谢你的帮助!

这是我的代码!------也许这是我的代码，所以我需要，那指导我，或告诉我，如何做或应该做。谢谢 ----------

开始代码!

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

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

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

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

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

相关文章：