Question

我正在使用Symfony2.8与aviaryeditor Image Editor。场景是我有一个文件上传字段。我想允许用户上传图像并使用图像进行一些编辑（裁剪，调整大小，效果），然后将其上传到服务器。在后端我得到了文件。做一些检查和验证，并将其上传到我的本地文件系统s3。

到目前为止我所做的是，我允许用户从用户上传图像并在表单中显示上传的图像。在图像上点击编辑器弹出，编辑后给出新网址（avairy api的s3网址）。

$builder
    ->add('media', 'file', array(
        'data_class' => null,
        'label' => ucfirst('Choose Domicile File'),
        'attr' => array('class' => 'form-control')
    )
)


<div class = "form-group col-xs-5">
    <label class="control-label">{{ form_label(domicileForm.media) }}</label>
    <div class="text-center">
        {{form_widget (domicileForm.media, {'attr': {'class':  'form-control'}})}}
    </div>
    <img id="blah" src="#" alt="your image"
         class="img-responsive img-thunmbail"
         onclick="return launchEditor(this.id, this.src);" />
</div>

和js

 <script>
        $(document).ready(function() {
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#blah').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#pncmisdashboard_bundle_dimicile_type_media").change(function(){
                readURL(this);
            });
        });
    </script>
        <script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
        <!-- Instantiate Feather -->
        <script type='text/javascript'>
            var featherEditor = new Aviary.Feather({
                apiKey: '43232',
                apiVersion: 3,
                theme: 'light', // Check out our new 'light' and 'dark' themes!
                tools:'crop,resize,color,sharpness,text',
                appendTo: '',
                onSave: function(imageID, newURL) {
                    var img = document.getElementById(imageID);
                    $(imageID).attr('src', newURL);
//                    //copy the url to the hidden form field
//                    $('#pncmisdashboard_bundle_dimicile_type_media').val(newURL);
                    $('#pncmisdashboard_bundle_dimicile_type_media').attr('value', newURL);
                    img.src = newURL;
                    alert(imageID);
                    alert(newURL);
                    alert(imageID);


                },
                onError: function(errorObj) {
                    alert(errorObj.message);
                }
            });
            function launchEditor(id, src) {
                featherEditor.launch({
                    image: id,
                    url: src
                });
                return false;
            }
        </script>

并且在api成功返回新图像的url之后，我将此url设置为media（文件类型）字段。但它没有发生。它保存了首次上传而非新图片的原始图像。

使用Avairy Editor进行Symfony图像编辑

0 个答案: