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 :
Donc, en cliquant sur le bouton 'keep_btn', je voudrais que mon input file soit modifié pour référencer mon image recadrée.
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); } };
Quelqu'un aurait une idée sur la manière de procéder?
Merci d'avance pour votre aide.
Partager