Javascript 将Pica与Cropit一起使用时，无法将图像数据设置为隐藏字段

我正在尝试使用with实现客户端图像大小调整和裁剪。在下面的代码中，我试图将pica创建的数据设置为一个隐藏的表单字段，然后将该表单提交到一个php文件，以图像的形式显示该数据，当我以正常的画布方式进行操作时，它是有效的，但当我尝试通过pica进行操作时，它不起作用，下面是这两种情况的代码

1。下面的代码通过普通画布实现它，并且可以正常工作。

HTML:

<form action="http://localhost/img_upload/image/upload" id="input-form" method="post" accept-charset="utf-8">
    <div class="image-editor">
            <input type="file" class="cropit-image-input">
            <div class="cropit-image-preview"></div>
            <div class="image-size-label">
              Drag Slider to zoom
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <button type="submit">Submit</button>
      </div>
</form>

  $(function() { 
    $('.image-editor').cropit();

    $('#input-form').submit(function() {

      // Move cropped image data to hidden input
      var imageData = $('.image-editor').cropit('export', {type: 'image/jpeg',quality: .75});
      $('.hidden-image-data').val(imageData);

      // don't submit the form if the imageData is empty
      // for example if user is clicking on the submit without loading an image
      if (imageData == null) {
        return false;
      }
    });
  });

<form action="http://localhost/img_upload/image/upload" id="input-form" method="post" accept-charset="utf-8">
    <div class="image-editor">
      <input type="file" class="cropit-image-input">
      <div class="cropit-image-preview"></div>
      <div class="image-size-label">
        Drag slider to zoom
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <input type="hidden" name="image-data" class="hidden-image-data">
      <input type="submit" value="Upload">
    </div>
</form>

  $(document).ready(function() {
    var $editor = $('.image-editor');
    $editor.cropit();

    $('#input-form').submit(function() {
      // Get cropping information
      var imgSrc = $editor.cropit('imageSrc');
      var offset = $editor.cropit('offset');
      var zoom = $editor.cropit('zoom');
      var previewSize = $editor.cropit('previewSize');
      var exportZoom = $editor.cropit('exportZoom');

      var img = new Image();
      img.src = imgSrc;

      // Draw image in original size on a canvas
      var originalCanvas = document.createElement('canvas');
      originalCanvas.width = previewSize.width / zoom;
      originalCanvas.height = previewSize.height / zoom;
      var ctx = originalCanvas.getContext('2d');
      ctx.drawImage(img, offset.x / zoom, offset.y / zoom);

      // Use pica to resize image and paint on destination canvas
      var zoomedCanvas = document.createElement('canvas');
      zoomedCanvas.width = previewSize.width * exportZoom;
      zoomedCanvas.height = previewSize.height * exportZoom;
      pica.resizeCanvas(originalCanvas, zoomedCanvas, {
        // Pica options, see https://github.com/nodeca/pica


      }, function(err) {
        if (err) { return console.log(err); }

        // Resizing completed
        // Read resized image data
        var picaImageData = zoomedCanvas.toDataURL('image/jpeg', .75);
        $('.hidden-image-data').val(picaImageData);

      });

      if (picaImageData == null) {
        return false;
      }

    });
  });

2。以下代码试图通过pica实现它，但失败。

HTML:

<form action="http://localhost/img_upload/image/upload" id="input-form" method="post" accept-charset="utf-8">
    <div class="image-editor">
            <input type="file" class="cropit-image-input">
            <div class="cropit-image-preview"></div>
            <div class="image-size-label">
              Drag Slider to zoom
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <button type="submit">Submit</button>
      </div>
</form>

  $(function() { 
    $('.image-editor').cropit();

    $('#input-form').submit(function() {

      // Move cropped image data to hidden input
      var imageData = $('.image-editor').cropit('export', {type: 'image/jpeg',quality: .75});
      $('.hidden-image-data').val(imageData);

      // don't submit the form if the imageData is empty
      // for example if user is clicking on the submit without loading an image
      if (imageData == null) {
        return false;
      }
    });
  });

<form action="http://localhost/img_upload/image/upload" id="input-form" method="post" accept-charset="utf-8">
    <div class="image-editor">
      <input type="file" class="cropit-image-input">
      <div class="cropit-image-preview"></div>
      <div class="image-size-label">
        Drag slider to zoom
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <input type="hidden" name="image-data" class="hidden-image-data">
      <input type="submit" value="Upload">
    </div>
</form>

  $(document).ready(function() {
    var $editor = $('.image-editor');
    $editor.cropit();

    $('#input-form').submit(function() {
      // Get cropping information
      var imgSrc = $editor.cropit('imageSrc');
      var offset = $editor.cropit('offset');
      var zoom = $editor.cropit('zoom');
      var previewSize = $editor.cropit('previewSize');
      var exportZoom = $editor.cropit('exportZoom');

      var img = new Image();
      img.src = imgSrc;

      // Draw image in original size on a canvas
      var originalCanvas = document.createElement('canvas');
      originalCanvas.width = previewSize.width / zoom;
      originalCanvas.height = previewSize.height / zoom;
      var ctx = originalCanvas.getContext('2d');
      ctx.drawImage(img, offset.x / zoom, offset.y / zoom);

      // Use pica to resize image and paint on destination canvas
      var zoomedCanvas = document.createElement('canvas');
      zoomedCanvas.width = previewSize.width * exportZoom;
      zoomedCanvas.height = previewSize.height * exportZoom;
      pica.resizeCanvas(originalCanvas, zoomedCanvas, {
        // Pica options, see https://github.com/nodeca/pica


      }, function(err) {
        if (err) { return console.log(err); }

        // Resizing completed
        // Read resized image data
        var picaImageData = zoomedCanvas.toDataURL('image/jpeg', .75);
        $('.hidden-image-data').val(picaImageData);

      });

      if (picaImageData == null) {
        return false;
      }

    });
  });

这是控制器（两种情况下都是相同的）。
注意：我正在使用codeigniter进行此测试

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Image extends CI_Controller {

  public function index()
  {
    $this->load->view('upload_form');
  }

  public function upload()
  {
    $image = $this->input->post('image-data');
    echo "<img src='$image'>";
  }

}   

---

@sjm No它没有给出任何错误消息，但是如果是pica，结果页（我要打印结果图像的地方）是空的，而如果是正常画布调整大小，则显示结果。@sjm让我更新问题并添加控制器。您已经看到了这两种情况下的视图文件。@sjm不，它没有给出任何错误消息，但对于pica，结果页（我要打印结果图像的地方）是空的，而对于正常画布调整大小，它显示结果。@sjm让我更新问题并添加控制器。您已经看到了这两个案例的视图文件。