Redimensionnement de l'image qui utilise Jcrop
J'utilise le Jquery Jcrop pour tailler mes images. Maintenant, je suis à la mise en œuvre d'un curseur de redimensionnement de l'image. Je veux que le recadrage et le redimensionnement s'est vraiment passé sur la même page.
Je fais comme ça:
$(document).ready(function() {
var img = $('#cropbox')[0]; //Get my img elem
var orgwidth, orgheight;
$("<img/>") //Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
orgwidth = this.width; //Note: $(this).width() will not
orgheight = this.height; //work for in memory images.
});
$('#cropbox').Jcrop({
onSelect: updateCoords
});
$("#imageslider").slider({
value: 100,
max: 100,
min: 1,
slide: function(event, ui) {
//$('ul#grid li').css('font-size',ui.value+"px");
resizeImage(orgwidth, orgheight);
}
});
});
Et mon simple resizeImage fonction:
function resizeImage(orgwidth, orgheight) {
var value = $('#imageslider').slider('option', 'value');
var width = orgwidth * (value / 100);
var height = orgheight * (value / 100);
$('#cropbox').width(width);
$('#cropbox').height(height);
$('#tester').val("org: "+orgwidth+" now: "+width);
}
Le problème est que, dès que j'allume Jcrop je ne peux pas redimensionner l'image. Comment puis-je utiliser ces deux fonctions en même temps?
OriginalL'auteur | 2011-06-03
Vous devez vous connecter pour publier un commentaire.
J'ai fini par détruire la jCrop lors du redimensionnement et de le remettre sur après redimensionnement. Merci quand même. Code:
OriginalL'auteur
J'ai eu la même tâche à accomplir: redimensionner l'image avec un curseur où jCrop est appliquée. Il y a quelques éléments que vous devez redimensionner également que jCrop créé, non seulement l'image. J'ai fini la correction du jCrop plugin et voici le patch pour la dernière jCrop-0.9.10.
Patch votre jCrop. Si vous ne savez pas comment appliquer le patch, il suffit de mettre le resizeImage fonction de la ligne de 1578 de jCrop (unimified version, bien sûr):
Obtenir le jCrop API:
Calc nouvelle hauteur et en largeur. Si vous faites cela avec un curseur, laissez le curseur de dire le retour de la nouvelle largeur de l'image et de vous calculer une nouvelle hauteur avec un ratio d'aspect de l'image:
Il y a quelques autres points à garder un oeil sur. Après chaque redimensionner votre devrait ressembler que la zone de recadrage est toujours dans la fenêtre d'affichage de l'image. Si vous avez besoin je pouvais poster la source complète de la façon dont je l'ai fait pour moi: jCrop + jquery ui slider pour redimensionner l'image.
Ce qui concerne
Merci!!!! Fonctionne très bien
OriginalL'auteur Hermann Bier
Ce que vous pouvez également faire est de faire usage de la setImage fonction de Jcrop, lorsque le curseur de changements, appelez le setImage avec le Jcrop de l'api et de créer de nouvelles valeurs de largeur et hauteur comme ceci:
Ce que je ne suis pas sûr que cette technique est si c'est la meilleure solution parce que chaque fois que vous appelez la setImage fonction, jcrop crée un nouvel objet Image.
OriginalL'auteur CupOfJoe
Si ce que vous voulez, c'est que le redimensionnement doit être proportionnel, je ne pense pas que vous devez le curseur (puisque ça semble être incompatible avec jCrop). Vous pouvez utiliser jCrop et dans le onChange cas, s'assurer de la proportionnalité (qui est, de mettre en œuvre la resizeImage fonction, modifié).
C'est ce que je pense.
OriginalL'auteur afaolek
Comme une extension de Hermann Bier réponse, j'ai ajouté le jquery animation.
Le redimensionnement ressemble de manière mieux quand c'est animé 🙂
Mis en œuvre dans Jcrop version: jquery.Jcrop.js v0.9.12
Recherchez le code:
dans jquery.Jcrop.js autour de la ligne 1573
et de le remplacer par:
Appel à la fonction d'animer le redimensionner.
N'hésitez pas à supprimer le code entre /* */- j'ai juste gardé comme une référence
Heureux De Codage 🙂
OriginalL'auteur Anders Ilenkop