Elemento para enviar y procesar Imágenes

Este elemento se encarga de enviar un archivo de imagen a nuestro servidor post procesarlo par aplicarle efectos y recortes. Adicional a eso permite enviar un solo archivo o múltiples, permite ordenarlos y visualizarlos como iconos dentro del widget.

Propiedades adicionales

Elimina al elemento padre que envuelve al contenido ej. El editor da como resultado: “<p>texto <strong>tal</strong></p>” -> resultado obtenido será: “texto <strong>tal</strong>”. Por default false. Parámetro del editor tinymce 4.3.3 . Por default: "advlist anchor autolink charmap code textcolor colorpicker contextmenu directionality emoticons fullscreen hr image insertdatetime link lists media nonbreaking noneditable paste preview print searchreplace table visualblocks visualchars". Parámetro del editor tinymce 4.3.3 . Por default: "undo redo removeformat | styleselect | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | image link media | charmap anchor emoticons nonbreaking insertdatetime table insertEmbedObj insertfontawesome insertskeldivs | ltr rtl visualblocks visualchars | preview fullscreen | code print searchreplace". Parámetro del editor tinymce 4.3.3 . Por default: "file edit view insert table tools". Parámetro del editor tinymce 4.3.3 . Por default: "link image inserttable | cell row column deletetable". Parámetro del editor tinymce 4.3.3 . Por default: "8pt 10pt 12pt 14pt 18pt 24pt 36pt". Parámetro del editor tinymce 4.3.3 . Por default: "Milo=Milo-Text; Century School book italic=century_schoolbookitalic; Open Sans=Open Sans, sans-serif; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats". Parámetro del editor tinymce 4.3.3 . Se agragara a esta lista: ", assets/js/jquery-ui/jquery-ui.css , ../assets/css/main.css , assets/js/transforms/transforms.css, assets/css/general.css". Esta opción sirve para definir como serán manejados los nombres de archivo al enviarlos, Por default está en 'auto'.
  • si esta vacio se usara el nombre de archivo original (se eliminan caracateres especiales y acentos),sin embargo si hay dos archivos con el mismo nombre en el servidor serán reemplazados
  • si se define un nombre este será usado para el archivo (este nombre es sin extensión). De igual forma si el archivo ya existe será reemplazado.
  • Si se define como ‘auto’ se generara un número aleatorio con un timestamp y Caracteres aleatorios ej. 1477438486B29.jpg
Esta opción sirve agregar un prefijo a todos los archivos enviados. ej. “small-” -> small-archivo.jpg Esta opción sirve agregar un sufijo a todos los archivos enviados. ej. “-data” -> archivo-data.jpg Es el directorio raíz a donde serán enviados los archivos, por default “uploads”, si el directorio no existe será creado. Este parámetro sirve para agregar un sub directorio dentro del directorio raíz de envíos, si el directorio no existe será creado. ej. "bigpictures" -> "uploads/bigpictures/" Este parámetro sirve para decirle al widget que nos muestre información adicional a la hora de enviar archivos o en la vista previa. nos mostrara detalles de lo que el input o textarea contienen. por default "false" Clase que se agrega al widget en la vista previa. Por default vacío. Este parámetro es un JSON con información de cómo procesaremos la imagen enviada del lado del servidor, es usado en el widget de imagen principalmente, pero también puede ser definido para el widget de video (para él envió del poster de video) y el widget de richtext ya que se envía imágenes y video para el contenido enriquecido. las funciones que se pueden prosesar son:
  • Cropping
  • Filter
  • Flip
  • Opacity
  • Resizing
  • Rotating
  • WritingTextImage
  • watermarkImage
  • thumbnailImage
Todas estas funciones pueden mezclarse entre sí y guardar en resultado en sub carpetas y archivos separados. tambien puede procesar imagenes GIF animadas.

Edicion JSON imageprocessing:

images:

Selecciona de lado derecho alguno de los elementos de la lista para editar.

Editando actualmente: ninguno

La imagen al ser enviada puede ser copiada en un sub directorio. Así las acciones se ejecutaran sobre esta copia de imagen. Si no se define las acciones se ejecutaran sobre la imagen en el lugar donde se definió el envío.

Si no es definido se toma transparente en png y blanco para los demás formatos




Cropping

Si no se define Width y Height se recortara un cuadrado del tamaño del lado más pequeño de la imagen


Filter


IMG_FILTER_BRIGHTNESS:Nivel de brillo. -255 = min brightness, 0 = no change, +255 = max brightness
IMG_FILTER_CONTRAST: Nivel de contraste. -100 = max contrast, 0 = no change, +100 = min contrast (note the direction!)
IMG_FILTER_COLORIZE: Valor del componente rojo. Adds (subtracts) specified RGB values to each pixel. The valid range for each color is -255...+255, not 0...255. The correct order is red, green, blue. -255 = min, 0 = no change, +255 = max This has not much to do with IMG_FILTER_GRAYSCALE.
IMG_FILTER_SMOOTH: Applies a 9-cell convolution matrix where center pixel has the weight arg1 and others weight of 1.0. The result is normalized by dividing the sum with arg1 + 8.0 (sum of the matrix). any float is accepted, large value (in practice: 2048 or more) = no change
IMG_FILTER_PIXELATE: Tamaño de bloque en píxeles.



IMG_FILTER_COLORIZE:Valor del componente verde. Adds (subtracts) specified RGB values to each pixel. The valid range for each color is -255...+255, not 0...255. The correct order is red, green, blue. -255 = min, 0 = no change, +255 = max This has not much to do with IMG_FILTER_GRAYSCALE.
IMG_FILTER_PIXELATE: Si usar o no el efecto de pixelación avanzado (por defecto a FALSE).



IMG_FILTER_COLORIZE:Valor del componente azul. Adds (subtracts) specified RGB values to each pixel. The valid range for each color is -255...+255, not 0...255. The correct order is red, green, blue. -255 = min, 0 = no change, +255 = max This has not much to do with IMG_FILTER_GRAYSCALE.



IMG_FILTER_COLORIZE:Canal alfa. Un valor entre 0 y 127. 0 indica completamente opaco mientras que 127 indica completamente transparente.


Flip


Opacity


Resizing


Rotating


WritingTextImage