Positionnement dynamique d'une image

1 pièce(s) jointe(s)

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 :
Pièce jointe 206161

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:

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:

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);

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é

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:

var styles = getComputedStyle(this.el);

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

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