Question

我正在尝试使用Cropit Pica来实现客户端调整大小和裁剪图像。在下面的代码中，我试图将pica创建的数据设置为隐藏的表单字段，然后将该表单提交到php文件以将数据显示为图像，当我以普通的画布方式执行时，它可以工作，但是当我尝试通过异食癖来做它不起作用，以下是两种情况的代码。

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>

Jquery的：

  $(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;
      }
    });
  });

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">
      <input type="submit" value="Upload">
    </div>
</form>

Jquery的：

  $(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'>";
  }

}

编辑：当我在github上问同样的问题时，这就是Pica的维护者评论的内容。

“Pica是异步的。你提交的当前实现将在异食癖返回数据之前结束。这是一个通用的问题，与异食癖无论如何。 “

任何帮助将不胜感激。

谢谢。

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

0 个答案: