Bonjour,

Dans un projet Symfony, j'utilise Cropper.js. Tout se passe correctement, sauf que je ne sais vraiment pas comment modifier mon input file afin que celui-ci fasse référence à l'image recadrée et non à l'image uploadée.

Voici mon javascript :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
...
var preview = document.getElementById('avatar_img');
var file_input = document.getElementById('avatar_input');
var cropper;
 
$(document).ready(function() {
...
    $('#avatar_input').change(function(event) {
 
        $('#avatar_img').unwrap('span');
        $('#avatar_img').width(248);
        $('#span_keep_btn').show();
 
        previewFile(preview, file_input);
 
 
    });
 
    preview.addEventListener('load', function(event) {
 
        if(cropper) 
        {
 
            cropper.destroy();
 
        }
 
        cropper = new Cropper(preview, {
 
            aspectRatio: 1/1
        })
 
    })
 
    $('#keep_btn').click(function(event) {
 
        event.preventDefault();
 
        var croppedImage = cropper.getCroppedCanvas({
 
            maxHeight:1000,
            maxWidth: 1000
 
        });
 
        // Je voudrais modifier ici mon input file afin que mon image recadrée soit sauvegardée par la suite en base de données.
 
    });
 
}); 
 
function previewFile() 
{
 
    var file = file_input.files[0];        
    var reader = new FileReader(); 
 
    reader.addEventListener('load', function(event) 
    {
 
        preview.src = reader.result;
 
    }, false);
 
    if (file) 
    {
 
        reader.readAsDataURL(file);
 
    }
 
};
Donc, en cliquant sur le bouton 'keep_btn', je voudrais que mon input file soit modifié pour référencer mon image recadrée.

Quelqu'un aurait une idée sur la manière de procéder?

Merci d'avance pour votre aide.