javascript - and - jcrop js

JCrop redimensiona la imagen no recorte-Javascript

Question

Estoy tratando de usar JCrop para recortar una imagen. Sin embargo, los resultados son frustrantemente incorrectos y no estoy seguro de por qué. Tengo un cargador de imágenes que cuando alguien selecciona en la imagen un javascript cambia la fuente de una imagen que ya está en la página para que coincida con la imagen que acaba de subir. Entonces tengo este código:

$(''#myForm'').ajaxForm({
    dataType: ''json'',
    success: function (result) {
        $("#image-editor-preview img")
            .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
                        .Jcrop({
                            aspectRatio: 1,
                            setSelect: [100, 100, 50, 50],
                            minSize: [160, 160],
                            maxSize: [160, 160],
                            onChange: setCoords,
                            onSelect: setCoords
                        });
    }
});

var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
    x = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};

Sin embargo, esto es lo que sucede:

Intenté bastante para solucionarlo, pero los resultados finales SIEMPRE son los mismos. ¿Alguien tiene alguna idea? Gracias.

Answer 1

De acuerdo con los documentos Jcrop, en realidad no hace el recorte. Solo crea una UI de recorte de imagen. Luego depende del servidor que realiza el recorte real; ver http://deepliquid.com/content/Jcrop_Implementation_Theory.html . Parece que el complemento está haciendo exactamente lo que está diseñado para hacer. Ahora deja el resto para que lo haga usted mismo en el servidor, como lo muestran.

Answer 2

Pude resolverlo. Resulta que JCrop dentro de un modal de arranque de twitter tiene un problema con el ancho del cuadro JCrop. El modo de arranque de twitter está anulando el CSS dentro de JCrop css. Tuvo que modificar el CSS en JCrop para que esto no ocurra.

Answer 3

Tuve el mismo problema, pero encontré, por qué sucede eso.

En mi archivo CSS tenía este código:

img {
    width:  100%;
    height: auto;
    border: none;
} 

Cuando eliminé el ancho y el alto de esta definición, el complemento comenzó a funcionar correctamente.