Recherche une solution avec "Input file" pour donner la possibilité de pivoter une image avant de l'uploader
Bonjour,
Je recherche une solution avec "Input file" pour donner la possibilité de pivoter une image avant de l'uploader dans le serveur, voici un exemple de script simple que j'ai :
Code:
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
|
<script type="text/javascript">
$(window).load(function(){
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#apercuImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#avatar").change(function(){
readURL(this);
});
});
</script>
<div id="affiche" style="float:left">
<img id="apercuImage" src="/images/affiche_defaut.jpg" alt="Ajouter une affiche" onclick="document.getElementById('avatar').click(); return false;" width="250">
<br>
<br>
<a class="up" href="#" onclick="document.getElementById('avatar').click(); return false;">Ajouter une affiche</a>
<input id="avatar" name="avatar" style="display:none" accept="image/*" type="file">
</div> |
Il suffit de cliquer sur "Ajouter une affiche" et de mettre une image, vous allez voir que l'image sélectionné sera affiché dans l'id "apercuImage", mais j'aimerais donner la possibilité aux clients de pivoter cette image afin de l'envoyer dans le serveur avec la prise en compte du pivotage. C'est possible de faire ça? Faut t'il s'aider de <canvas> ? Connaissez-vous un système simple qui pourait faire ça?
Merci,
cordialement.
