Php Symfony2 Cropit |如何恢复我的裁剪图像？

我对这个插件非常失望。我是JS/Jquery中的noob，但我的网站非常需要这个插件。。。 所以我在这里找到了cropit：

我不知道如何在我的控制器中恢复剪切的图像并保存它。。。 所以我的表格是：

<div class="form-group">
    {{ form_label(form.image, 'Image', {'label_attr': {'class': 'col-sm-3 control-label'}})}}
      <div class="image-cropper">
           <!-- This is where the preview image is displayed -->
          <div class="row">
            <div class="col-sm-offset-2 col-sm-8">
              <div class="cropit-image-preview-container">
               <div class="cropit-image-preview"></div>
             </div>
           </div>
         </div> 
                <!-- This range input controls zoom -->
                    <!-- You can add additional elements here, e.g. the image icons -->
          <div class="row">
            <div class="col-sm-offset-4 col-sm-4">
              <input type="range" class="cropit-image-zoom-input" />
            </div>
          </div>
              {{ form_errors(form.image) }}

          <div class="row">    
            <div class="col-sm-4">
              {{ form_widget(form.image) }}
                <div class="select-image-btn">Select new image</div>
                <div class="send_image">Get Cropped image.</div>
            </div>
          </div>
      </div>
</div>

我看到了很多帖子，但是没有一个对我有用，我不太理解。 有人能帮我解释一下吗？ 多谢各位

编辑：我的第一种方法

我的表单包含一个隐藏输入，用于保存base64数据：

 $('form').submit(function() {
        // Move cropped image data to hidden input
        var imageData = $('.image-cropper').cropit('export');
        $('.hidden-image-data').val(imageData);
      };``

和my Imagetype，其中文件输入用于加载原始图像，隐藏输入用于保存base64图像

 public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('file', 'file', array(
                'attr' => array('class' => 'cropit-image-input')))
            ->add('file', 'hidden', array('attr' => array('class' => 'hidden-image-data')))

        ;
    }

---

我的控制器仍然是一样的。

要获取保存文件的路径：

<?php
public function getUploadedFilePath()
{
    return $this->getUploadRootDir().'/'.$this->id.'.'.$this->tempFilename;
}

我已经解决了

此外，使用

@K-Phoen响应在指导解决方案方面有很大的作用

这是我的代码：

User.php，这是一个和更多的VichUploaderBundle设置

UserType.php

ImageStringToFileTransformer.php，魔法完成了，我们将base64字符串转换为UploadedFile

services.yml

在我的小树枝上，
my_form.html.twig

由于我在任何地方都没有找到解决方案的答案，我决定离开这里，为所有需要它的人服务。我希望您能找到帮助。
但我的裁剪图像暂时不保存。我的代码只保存原始图像。这是我的大问题。我不明白，因为当我单击“选择图像”div或“获取裁剪图像”div以获取base64数据时，什么都没有发生。。。我的代码中有任何错误吗？我在问题中编辑了我的Jquery和表单。所以现在“选择新图像”可以工作，但“剪切图像”不能“在我的网站上。我在JSFIDLE上试过了，效果很好，所以我的脚本中可能有冲突。有什么问题吗？我使用引导和一个名为clean-blog的引导模板。如何将映像发送到服务器？您是否发送裁剪信息，并且必须在php中再次裁剪图像（例如使用imagemagick），还是发送base64信息？请使用代码示例。我在第一个问题的末尾使用了一些代码进行了编辑。谢谢。问题是，使用任何js cropper脚本，您都不会在setFile字段中获得
UploadedFile
对象。我使用模型数据转换器和自定义字段类型使其与symfony一起工作？你能告诉我你是怎么做的吗？是的。您将得到带有一些不相关前缀的base64。其思想是使用
隐藏的
字段和数据转换器将其转换为文件形式。对不起，我不确定我是否能分享来源。@Flushdrew，你能检查我的答案吗？哦，我还没有看到这个答案！我将在我的代码中尝试它。谢谢你的时间和解释！您好@jgarcía我需要您的帮助，请在我的一个项目中尝试使用您的解决方案。但没有成功，它不起作用。我可以调整图像大小并上传它，但保存图像路径的数据库表字段在实体保存后为空。我从那时开始工作，大约4个月。我累了，请帮帮我。抱歉，如果我有一些错误，英语不是我的主要语言。嗨@angel，你是否在实体定义中包含了这一行*@Vich\Uploadable？你有什么错误吗？@jgarcía是的，我已经做了，但没有成功。我也犯了同样的错误。也许我应该发布我的源代码来帮助你me@angel好的，用你的代码创建一个要点，我试着用一种方法来检查它。
 public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('file', 'file', array(
                'attr' => array('class' => 'cropit-image-input')))
            ->add('file', 'hidden', array('attr' => array('class' => 'hidden-image-data')))

        ;
    }

<?php
public function getUploadedFilePath()
{
    return $this->getUploadRootDir().'/'.$this->id.'.'.$this->tempFilename;
}

<script>
var h = $imageCropper.cropit('export', {
  type: 'image/jpeg',
  quality: .9,
  originalSize: true
});
</script>

namespace Application\Sonata\UserBundle\Entity;

//...
use Vich\UploaderBundle\Mapping\Annotation as Vich;

/**
 * User
 *
 * ........
 * ........
 * @Vich\Uploadable
 * ........
 * ........
 * 
 */
class User extends BaseUser {

    /**
     * NOTE: This is not a mapped field of entity metadata, just a simple property.
     * 
     * @Vich\UploadableField(mapping="user_avatar", fileNameProperty="avatarName")
     * 
     * @var File
     */
    private $avatar;

    /**
     * @ORM\Column(type="string", length=255)
     *
     * @var string
     */
    private $avatarName;

    /**
     * @ORM\Column(type="datetime")
     *
     * @var \DateTime
     */
    private $updatedAt;

    //....


    /**
     * If manually uploading a file (i.e. not using Symfony Form) ensure an instance
     * of 'UploadedFile' is injected into this setter to trigger the  update. If this
     * bundle's configuration parameter 'inject_on_load' is set to 'true' this setter
     * must be able to accept an instance of 'File' as the bundle will inject one here
     * during Doctrine hydration.
     *
     * @param File|\Symfony\Component\HttpFoundation\File\UploadedFile $image
     */
    public function setAvatar(File $image = null) {
        $this->avatar= $image;

        if ($image) {
            // It is required that at least one field changes if you are using doctrine
            // otherwise the event listeners won't be called and the file is lost
            $this->updatedAt = new \DateTime('now');
        }
    }

    /**
     * @return File
     */
    public function getAvatar() {
        return $this->avatar;
    }

    /**
     * @param string $avatarName
     */
    public function setAvatarName($avatarName) {
        $this->avatarName= $avatarName;
    }

    /**
     * @return string
     */
    public function getAvatarName() {
        return $this->avatarName;
    }

}

namespace AppBundle\Form;

//...
use Doctrine\Common\Persistence\ObjectManager;
use AppBundle\Form\DataTransformer\ImageStringToFileTransformer;

class UserType extends AbstractType {

    private $manager;

    public function __construct(ObjectManager $manager)
    {
        $this->manager = $manager;
    }

    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder                
            ->add('avatar', 'hidden', [
                'attr' => [
                    'class' => 'hidden-image-data'
                ]
            ])
            ->add('imagedata', 'file', [
                'mapped' => false,
                'required' => false,
                'attr' => [
                    'class' => 'cropit-image-input'
                ]
            ])
            //...
            ;

        $builder->get('avatar')
            ->addModelTransformer(new ImageStringToFileTransformer($this->manager));
    }

    //...

}

namespace AppBundle\Form\DataTransformer;

use Symfony\Component\Form\DataTransformerInterface;
use Doctrine\Common\Persistence\ObjectManager;
use Symfony\Component\HttpFoundation\File\UploadedFile;

/**
 * Description of ImageStringToFileTransformer
 *
 * @author Juanjo García
 */
class ImageStringToFileTransformer implements DataTransformerInterface {

    private $manager;

    public function __construct(ObjectManager $manager) {
        $this->manager = $manager;
    }

    /**
     * Transforms a string (base64) to an object (File).
     *
     * @param  string $imageString
     * @return File|null
     * @throws TransformationFailedException if no object (File)
     */
    public function reverseTransform($imageString) {

        // no base64? It's optional, so that's ok       
        if (!$imageString) {
            return;
        }

        preg_match('/data:([^;]*);base64,(.*)/', $imageString, $matches);

        $mimeType = $matches[1];
        $imagenDecodificada = base64_decode($matches[2]);
        $filePath = sys_get_temp_dir() . "/" . uniqid() . '.png';
        file_put_contents($filePath, $imagenDecodificada);

        $file = new UploadedFile($filePath, "user.png", $mimeType, null, null, true);

        if (null === $file) {
            // causes a validation error
            // this message is not shown to the user
            // see the invalid_message option
            throw new TransformationFailedException(sprintf(
                 'An issue with number "%s" does not exist!', $imageString
            ));
        }

        return $file;
    }

    /**
     * Transforms an object (File) to a string (base64).
     *
     * @param  File|null $file
     * @return string
     */
    public function transform($file) {
        return '';
    }

}

services:

    # datatransformer before saving to image
    app.form.type.user:
        class: AppBundle\Form\UserType
        arguments: 
            entityManager: "@doctrine.orm.entity_manager"
        tags:
            - 
                name: form.type

<script src="{{ asset('jquery.js') }}"></script>
<script src="{{ asset('jquery.cropit.js') }}"></script>
<script src="{{ asset('jquery.custom.js') }}"></script>

{% form_theme form with ['AppBundle:Forms:vich_cropit_fields.html.twig'] %}

{{ form_start(form, {'action': path('the_path'), 'method': 'POST', 'multipart': true, 'attr': {'class': 'the_class', 'role': 'form'} }) }}
    <div class="image-editor">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview"></div>
        </div>
        {{ form_widget(form.avatar) }}
        {{ form_widget(form.imagedata) }} 
        <div class="image-size-label">
        Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        {% if app.user.avatarName %}
            <img src="{{ vich_uploader_asset(app.user, 'avatar') }}" id="current-avatar" class="hide" />
        {% endif %}
    </div>   

    {{ form_rest(form) }}       

    <button type="submit" name="submit">Save</button>  

{{ form_end(form) }}

(function ($) {

    $('.image-editor').cropit({
          exportZoom: 0.5,
          imageBackground: true,
          imageBackgroundBorderWidth: 50
      });

    $('.image-editor').cropit('imageSrc', $("#current-avatar").attr('src'));

    $('form').submit(function () {
        // Move cropped image data to hidden input
        var imageData = $('.image-editor').cropit('export');
        $('.hidden-image-data').val(imageData);
    });

}).apply(this, [jQuery]);