Bonjour ! J'ai installé le plugin Jquery CropIt , qui permet de redimensionner et cropper les images dans une fenetre de prévisualisation. Le plugin se trouve ici : http://scottcheng.github.io/cropit/
Bref , je souhaite enregistrer cette image croppée et redimensionnée seulement je ne sais pas exactement comment faire.Tout d'abord mon formulaire d'upload fonctionne trés bien sans ce plugin.
Voici mon entité image :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | {
$this->file = $file;
if (null !== $this->url) {
$this->tempFilename = $this->url;
$this->url = null;
$this->alt = null;
}
}
/**
* @ORM\PrePersist()
* @ORM\PreUpdate()
*/
public function preUpload()
{
if (null === $this->file) {
return;
}
$this->url = $this->file->guessExtension();
$this->alt = $this->file->getClientOriginalName();
}
/**
* @ORM\PostPersist()
* @ORM\PostUpdate()
*/
public function upload()
{
if (null === $this->file) {
return;
}
if (null !== $this->tempFilename) {
$oldFile = $this->getUploadRootDir().'/'.$this->id.'.'.$this->tempFilename;
if (file_exists($oldFile)) {
unlink($oldFile);
}
}
$this->file->move(
$this->getUploadRootDir(), // Le répertoire de destination
$this->id.'.'.$this->url // Le nom du fichier à créer, ici « id.extension »
);
}
/**
* @ORM\PreRemove()
*/
public function preRemoveUpload()
{
$this->tempFilename = $this->getUploadRootDir().'/'.$this->id.'.'.$this->url;
}
/**
* @ORM\PostRemove()
*/
public function removeUpload()
{
if (file_exists($this->tempFilename)) {
// On supprime le fichier
unlink($this->tempFilename);
}
}
|
Et voici la partie du formulaire qui permet d'uploader l'image :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | {{ 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">
<div class="col-sm-4">
{{ form_widget(form.image) }}
</div>
<div class="cropit-image-preview"></div>
<!-- This range input controls zoom -->
<!-- You can add additional elements here, e.g. the image icons -->
<div class="col-sm-offset-4 col-sm-4">
<input type="range" class="cropit-image-zoom-input" />
</div>
{{ form_errors(form.image) }}
<div class="col-sm-4">
{{ form_widget(form.image, {'attr': {'class': 'cropit-image-input'}}) }}
</div>
<div class="select-image-btn">Select new image</div>
</div>
</div>
|
le code Jquery qui va avec :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript" src="{{ asset('js/cropit-master/dist/jquery.cropit.js') }}"></script>
<script>
$(function() {
$('.image-cropper').cropit({imageState: {src: { 'http://lorempixel.com/500/400/' },
},
});
// When user clicks select image button,
// open select file dialog programmatically
$('.select-image-btn').click(function() {
$('.cropit-image-input').click();
});
$('#oah_newsbundle_article_save').click(function() {
// Move cropped image data to hidden input
var imageData = $('.image-cropper').cropit('export');
$('#oah_newsbundle_article_image_file').val(imageData);
};
});
</script>
|
Je m'explique sur celui-ci (je n'y connais pas grand chose encore en Jquery/Js ). Le plugin dispose d'une option "export" qui permet à priori d'exporter la valeur de la nouvelle image en data URI. Dans le tuto sur ce plugin , ils utilisent cette variable imageData soit pour l'afficher directement via un
1 | window.open(imageData); |
Soit pour enregistrer cette valeur dans un Hidden Input du formulaire. Du coup au lieu de créer cet input , j'ai essayé de modifier la valeur de l'input de mon image pour enregistrer la valeur de l'image redimensionnée.Ca ne marche pas… Du coup quelqu'un pourrait me donner des pistes sur comment persister cette valeur et non l'image d'origine? Merci
