将裁剪的图像发送到数据库 ajax 在客户端和服务器上的 PHP

Posted 2023-05-09

【中文标题】将裁剪的图像发送到数据库 ajax 在客户端和服务器上的 PHP

【英文标题】：Send Cropped image to database ajax On client and PHP on server

【发布时间】：2015-10-13 21:52:48

【问题描述】：

我正在尝试使用客户端上的 javascript 和服务器上的 php 将图像上传到数据库。

从图库中选择第一张图片。 在缩放和裁剪后，图像被传递到数据库

问题是当我尝试提交裁剪图像值时未将实际上传的输入“文件”值传递给 php，但我需要将裁剪区域值传递给 PHP。

出于测试目的，如果需要所有的js，我可以提供它。

Js：这会裁剪图像

$(function() 
        $('.image-editor').cropit(
          exportZoom: 1.25,
          imageBackground: true,
          imageBackgroundBorderWidth: 40,

    );

    $('.export').click(function() 
      var imageData = $('.image-editor').cropit('export');
      window.open(imageData);
    );
  );

html：

 <form id="uploadForm" class="image-editor">
      <input type="file" class="cropit-image-input">
      <!-- .cropit-image-preview-container is needed for background image to work -->
      <div class="cropit-image-preview-container">
        <div class="cropit-image-preview"></div>
      </div>
      <div class="image-size-label">
        Resize image
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <input type="submit" class="export">Export</input >
    </form>

Ajax：ajax 将数据发送到 php

$(document).ready(function (e) 

    $("#uploadForm").on('submit', (function (e) 
        e.preventDefault();
        $.ajax(
            url: "upload.php",
            type: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) 
                $("#targetLayer1").html(data);
            ,
            error: function () 
        );
    );
);

PHP：

 if(count($_FILES) > 0) 
        if(is_uploaded_file($_FILES['userImage']['tmp_name'])) 
           $mysl = mysqli_connect("localhost", "root", "root","test");

            $imgData =addslashes(file_get_contents($_FILES['userImage']['tmp_name']));
            $imageProperties = getimageSize($_FILES['userImage']['tmp_name']);

            $sql = "UPDATE output_images SET imageType  ='$imageProperties['mime']',imageData= '$imgData' WHERE imageId='16'";
            $current_id = mysqli_query($mysl,

$sql) or die("<b>Error:</b> Problem on Image Insert<br/>" . mysqli_error());;
            if(isset($current_id)) 
                echo "done";
            
        
        

【问题讨论】：

为什么不将新维度作为值发送并在 php 中裁剪？

@EvadeCaptcha ，好点，但同样的过程应该在 PHP 中作为 PHP 代码重复，对吗？？

如果是我，我会让 jQuery 从界面创建尺寸，而不是实际在前端裁剪图像（只是让它看起来如此），然后将这些尺寸和图像发送到 php脚本。然后将图像存储在 tmp 文件夹中，并使用尺寸裁剪出要存储在永久位置的新图像。但是，有人可能会用更好的方法来回答，因为我以前从未处理过图像裁剪。

这听起来很有趣，我很新在客户端发送图像和服务器接收时，双方都浪费了相同的数据，如果你能详细说明一下，我可以理解我是如何第一次这样做的

你是对的，它会发送不必要的数据，因为你只需要图像的一部分，所以这种开销是否值得取决于服务器处理的流量，以及允许的图像大小。这暴露了，如果你能找到一种在前端裁剪它的方法，然后将图像发回，我会这样做。我只是不知道如何在前端创建一个新图像。

【参考方案1】：

首先，看看这个：Can I pass image form data to a PHP function for upload?

我认为问题出在：var imageData = $('.image-editor').cropit('export');。由于这个新图像从来不是表单的一部分，因此无法通过 AJAX 传递它。 在您的 JS/JQuery 中，我会建议：

var imageData = '';
$(function() 
    $('.image-editor').cropit(
        exportZoom: 1.25,
        imageBackground: true,
        imageBackgroundBorderWidth: 40,
    );

    $('.export').click(function() 
        imageData = $('.image-editor').cropit('export');
        window.open(imageData);
    );
);
$(document).ready(function (e) 
    $("#uploadForm").on('submit', (function (e) 
        e.preventDefault();
        var fd = new FormData(this);
        fd.append( imageData, file );
        $.ajax(
            url: "upload.php",
            type: "POST",
            data: fd,
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) 
                $("#targetLayer1").html(data);
            ,
            error: function () 
        );
    );
);

编辑

在您的示例中，您从未为您的input 定义name 或id 属性，因此PHP 无法索引$_FILES 全局。可以试试$_FILES[0]。我建议在您的 form 或发布时分配它。

您可以调整myFormData.append(name, file, filename);。所以应该是：

fd.append('crop-image', imageData, 'crop-image.jpg');

然后在 PHP 中，您使用$_FILES['crop-image'] 调用它。如果你想从表单中传递文件名：

$(document).ready(function (e) 
    $("#uploadForm").on('submit', (function (e) 
        e.preventDefault();
        var fd = new FormData(this);
        var origFileName = $("input[type='file']").val();
        var startIndex = (origFileName.indexOf('\\') >= 0 ? origFileName.lastIndexOf('\\') : origFileName.lastIndexOf('/'));
        var filename = origFileName.substring(startIndex);
        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0)
            filename = filename.substring(1);
        
        var cropFileName = "crop-" + filename;
        fd.append('crop-image' imageData, cropFileName );
        $.ajax(
            url: "upload.php",
            type: "POST",
            data: fd,
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) 
                $("#targetLayer1").html(data);
            ,
            error: function () 
        );
    );

【讨论】：

感谢您的回答与预期相同，但我有一个快速的问题，在服务器端如何接收此图像并保存在数据库中？？？

如果我将上传脚本添加到它，那么裁剪区域什么也不显示..:(

您可以尝试将其强制返回到表单元素中：***.com/questions/21044798/…

查看编辑以回答。我不明白您所说的“裁剪区域不显示任何内容”是什么意思