Image Crop para el CKEditor
Configuración
La configuración se realiza en el objeto "imagecrop". Por ejemplo:
config.imagecrop = {
cropsizes : [
{width:120, height:120, title:"120px square", name:"Thumbnail"},
{width:400, height:300, title:"400 * 300", name:"Content picture"},
{width:960, height:350, title:"960 * 350", name:"Big header"},
{width:0, height:0, title:"No restrictions", name:"Free crop"}
],
formats : [
{ title:"JPG - Low quality", value:"jpg60"},
{ title:"JPG - Normal quality", value:"jpg80", attributes:"selected"},
{ title:"JPG - High quality", value:"jpg90"},
{ title:"PNG (for texts)", value:"png"}
],
maximumDimensions : {width:1024, height:1024}
};
La propiedad "cropsizes" define las opciones de los rectángulos de recorte que aparecerán.
Cada opción es un elemento del array y tiene 4 propiedades:
|
Anchura del área de recorte |
Puede crear tantas opciones (Botones) de recorte como desee.
Si quiere crear una opción "Libre", dimensionable por el usuario, ponga cero en "width" y "height".
Después de recortar la imagen, el usuario puede seleccionar el formato y el grado de compresión en el formato jpg uese usará para crear el fichero. Estas opciones se detallan en la propiedad "formats".
{ title:"JPG - Low quality", value:"jpg60"},
{ title:"JPG - Normal quality", value:"jpg80", attributes:"selected"},
{ title:"JPG - High quality", value:"jpg90"},
{ title:"PNG (for texts)", value:"png"}
],
En la configuración de Image Crop peude cambiar la opción por defecto o suprimir las opciones que no le interesen.
Si el usuario pulsa "Aceptar" para guardar la imagen sin haber recortado la misma, esta se escala y se guarda con unas dimensiones máximas. Estas dimensiones máximas se definen en la propiedad "maximumDimensions":
Si no se incluye esta línea de configuración, el programa guardará la imagen con sus dimensiones originales.
Primera prueba
Vacíe su caché y recargue la página de su editor.
Añada una imagen (arrastrela sobre el editor, haga una captura de pantalla y péguela, use el icono Imagen del CKEditor, ...) y el diálogo para recortar la imagen aparecerá:
- Si pulda "Aceptar" su imagen será añadida tal y como está
- Si pulsa una opción de recortar, el rectángulo de recortar aparecerá. Podrá hacer zoom sobre la imagen, escalar el rectángulo y moverlo para elegir lo que le interesa
- Haga clic en "Recortar" y podrá elegir el formato y el nivel de compresión (en jpg) para guardar la imagen
Si tiene alguna pregunta, por favor contacte con nosotros.