ngImgCrop插件裁剪的图片怎么发给php服务器的

要将裁剪后的图片发送到 PHP 服务器，你可以使用 JavaScript 的 FormData 对象。首先，将裁剪后的图片转换为 Blob 对象，然后将其添加到 FormData 对象中。最后，使用 AJAX 将 FormData 对象发送到 PHP 服务器。

下面是一个示例代码：

// 获取裁剪后的图片数据
var blob = cropper.getCroppedCanvas().toBlob();

// 创建一个 FormData 对象
var formData = new FormData();
formData.append('image', blob, 'image.jpg');

// 发送到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功');
  } else {
    console.log('上传失败');
  }
};
xhr.send(formData);

其中，`cropper` 是 ngImgCrop 插件创建的裁剪对象，`upload.php` 是接收图片的 PHP 脚本。在 PHP 脚本中，你可以使用 `$_FILES` 变量获取上传的文件。

相关问题

ng-img-crop插件裁剪的图片怎么发给php 程序

要将使用ng-img-crop插件裁剪的图片发送到PHP程序进行处理，您可以使用以下步骤：

1. 在AngularJS中，使用$http服务将图片数据作为FormData对象发送给PHP程序。

2. 在PHP程序中，使用$_FILES变量接收FormData对象中的图片数据。

3. 使用PHP中的GD库或ImageMagick等图像处理库对接收到的图片进行裁剪和处理。

下面是一个简单的示例代码，展示如何使用AngularJS和PHP处理使用ng-img-crop插件裁剪的图片：

AngularJS代码：

$scope.uploadImage = function () {
    var formData = new FormData();
    formData.append('image', $scope.croppedImage);
    $http.post('upload.php', formData, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).success(function (response) {
        console.log(response);
    });
};

PHP代码：

if(isset($_FILES["image"])) {
    $image = $_FILES["image"]["tmp_name"];
    $crop_width = $_POST["crop_width"];
    $crop_height = $_POST["crop_height"];
    $crop_x = $_POST["crop_x"];
    $crop_y = $_POST["crop_y"];
    
    // 使用GD库进行图片裁剪
    $image_resized = imagecreatetruecolor($crop_width, $crop_height);
    $image_source = imagecreatefromjpeg($image);
    imagecopyresampled($image_resized, $image_source, 0, 0, $crop_x, $crop_y, $crop_width, $crop_height, $crop_width, $crop_height);
    imagejpeg($image_resized, "cropped_image.jpg", 100);
    
    echo "Image uploaded and cropped successfully!";
} else {
    echo "Image upload failed!";
}

在这个例子中，我们使用了POST请求，将FormData对象作为数据发送到PHP程序，然后在PHP程序中使用$_FILES变量接收FormData对象中的图片数据。接着，我们使用GD库对接收到的图片进行裁剪，并将裁剪后的图片保存为cropped_image.jpg文件。

webstorm图片裁剪插件

对于 WebStorm 的图片裁剪插件，有一个很受欢迎的选择是 "Image Cropper"。它是一个基于 JavaScript 的插件，可以让你在 WebStorm 中方便地裁剪和调整图片。

你可以在 WebStorm 的插件市场中搜索 "Image Cropper"，然后安装它。安装完成后，你可以在编辑器窗口中右键点击图片，选择 "Crop Image" 来打开插件的裁剪界面。在这个界面中，你可以选择裁剪区域、调整大小、旋转和镜像等操作。

除了 "Image Cropper"，还有其他一些图片处理插件可以在 WebStorm 中使用，你可以根据自己的需求进行选择和尝试。