Discussion :

[asurion]

Bonjour,
J'ai une image qui s'affiche avant upload une fois que l'utilisateur la sélectionne.
J'aimerais, a l'aide d'un input range, changer la taille de l'image dynamiquement et en direct.
Pareil pour la position.

J'ai cherché sur google, j'ai des bout de code par ci, par la mais aucune explication.

Exemple :

• On peut positionner correctement l'image avec un cursor:moove.
• On peut changer la taille avec le input range en bas.

Merci d'avance.

Mon HTML actuel:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="form-group">
      <label>Photo de couverture</label>
      <div class="fileupload-new thumbnail" id="container_image_preview" style="max-height: 300px;max-width: 1000px;background-image: url(&quot;http://www.placehold.it/1000x300/EFEFEF/AAAAAA&amp;text=pas+d'image&quot;); background-position: -200px 0px;background-repeat: no-repeat;width: 600px;height: 200px;">
	</div>
        <div class="slider-wrapper" style="padding-bottom: 15px;">
		<i class="glyphicon glyphicon-picture" style="float: left;height: 100%;margin: 1% 0 1% 0;"></i>
		<input class="cropit-image-zoom-input custom" type="range" min="0" max="1" step="0.01" style="float: left;margin: 2% 2% 2% 2%;width: 89.9%;">
		<i class="glyphicon glyphicon-picture" style="font-size: 30px;"></i>
	</div>
        <div>
	        <input style="display: inline-block;" type="file" id="chosenfile" name="photo" accept="image/*" onchange="refreshImg('preview_image', this.id)">
	        <a id="remove" class="btn btn-primary" data-dismiss="fileupload" style="margin-left:10px">Supprimer</a>
        </div>
         <p class="help-block">Non obligatoire. 500 ko max.</p>
</div>

Mon JS actuel :

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
 
// Affiche l'image choisi par l'user
function readFile() {
       if (this.files && this.files[0]) {
	         var FR = new FileReader();
		 FR.onload = function(e) {
      			getID("preview_image").innerHTML = e.target.result;
		      	getID("preview_image").src = e.target.result;
		};       
		 FR.readAsDataURL( this.files[0] );
	}
}
 
// Ajout un écouteur sur l'input file
getID("chosenfile").addEventListener("change", readFile, false);

[melka one]

jour

il faut utiliser un crans qui varierais de 0.1 avec une valeur maxi a deux pour doubler la taille et une mini a 0.1 puis en modifiant le width ou height de l'image en multipliant sa taille d'origine par la valeur de l'input le tour est joué

[asurion]

Salut
Ouai je m'en douté un peu de comment faire, mais j'y connais presque rien en JS :S
J'ai trouvé ca. Mais ne fonctionne pas sur mon site ...
http://jsfiddle.net/joplomacedo/VRvUB/236/

J'ai une erreur sur cette ligne la :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var styles = getComputedStyle(this.el);

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[asurion]

résolu : https://github.com/matiasgagliano/guillotine