FabricsJs fabSavePDF y colores
Quote from rrey on August 5, 2021, 4:28 pmHola @luishp . Estoy creando una peaqueña aplicación de tangram y cuando creo el pdf con fabSavePDF del plug-in FabricsJs, algunos colores cambian a otros. Para que puedas comprobarlo dejo aquí el programa que estoy haciendo:
https://genmagic.net/mates/tangram
Verás que una vez que haces clic en los botones de las figuras para que salgan en el escenario y grabas como pdf, no respeta todos los colores. No sé que puede ser debido.
Saludos,
Roger Rey
Hola @luishp . Estoy creando una peaqueña aplicación de tangram y cuando creo el pdf con fabSavePDF del plug-in FabricsJs, algunos colores cambian a otros. Para que puedas comprobarlo dejo aquí el programa que estoy haciendo:
https://genmagic.net/mates/tangram
Verás que una vez que haces clic en los botones de las figuras para que salgan en el escenario y grabas como pdf, no respeta todos los colores. No sé que puede ser debido.
Saludos,
Roger Rey
Quote from luishp on August 5, 2021, 7:00 pm@rrey ¿has probado a utilizar fabSaveAsBase64 y después con neoPdfImageBase64?
Sería interesante comprobar si persiste el problema. En todo caso no se como estás definiendo los colores (fíjate que puedes utilizar su nombre "red", su notación hexadecimal "#242e6b" o bien de la forma "rgb(20,40,56)" y se me ocurre que es posible que haya incompatibilidades entre el espacio de color de pantalla (RGB) y el que generalmente utilizan los documentos PDF (CMYK) más orientado a impresión, pero no lo se a ciencia cierta... habría que probar.
@rrey ¿has probado a utilizar fabSaveAsBase64 y después con neoPdfImageBase64?
Sería interesante comprobar si persiste el problema. En todo caso no se como estás definiendo los colores (fíjate que puedes utilizar su nombre "red", su notación hexadecimal "#242e6b" o bien de la forma "rgb(20,40,56)" y se me ocurre que es posible que haya incompatibilidades entre el espacio de color de pantalla (RGB) y el que generalmente utilizan los documentos PDF (CMYK) más orientado a impresión, pero no lo se a ciencia cierta... habría que probar.
Quote from rrey on August 6, 2021, 12:43 pm@luishp Son pluguins diferentes neoDpf y fabricsJs. Además neoPdf trabaja con iFrame y fabricJs con container por lo que las imágenes que hay en el container no se pueden enviar al Iframe. Todo debe hacerse con funciones del mismo pluguin creo yo. Además las imágenes que uso son imágenes de mapa de bits externas localmente y cargadas con fabLoadImage, por lo que no defino los colores ya que ya están definidos. El plugin neoPdf se que respecta los colores pero estoy usando en el programa las funciones de de fabrics que se basa en el elemento canvas de html 5.
Saludos,
Roger
@luishp Son pluguins diferentes neoDpf y fabricsJs. Además neoPdf trabaja con iFrame y fabricJs con container por lo que las imágenes que hay en el container no se pueden enviar al Iframe. Todo debe hacerse con funciones del mismo pluguin creo yo. Además las imágenes que uso son imágenes de mapa de bits externas localmente y cargadas con fabLoadImage, por lo que no defino los colores ya que ya están definidos. El plugin neoPdf se que respecta los colores pero estoy usando en el programa las funciones de de fabrics que se basa en el elemento canvas de html 5.
Saludos,
Roger
Quote from luishp on August 6, 2021, 1:02 pm@rrey puedes utilizar varios plugins a la vez sin problema y mezclar las funcionalidades de uno y otro. Puedes recuperar la imagen del Container donde trabajas con fabricjs utilizando fabSaveAsBase64. Esto guardará la información en una variable que después puedes enviar a un PDF (que no necesariamente tiene que estar en un IFrame) utilizando neoPdfImageBase64. Hasta donde yo se, no existe ninguna incompatibilidad.
Tanto si utilizas solo fabricjs como si utilizas los dos plugins, técnicamente se realiza la misma acción: se hace una "captura" del Container donde estás trabajando con fabricjs (del Canvas que hay en su interior, en realidad) y con ella se genera un PDF. Es irrelevante si lo que hay en el Container son imágenes externas o generadas por código.
Saludos.
@rrey puedes utilizar varios plugins a la vez sin problema y mezclar las funcionalidades de uno y otro. Puedes recuperar la imagen del Container donde trabajas con fabricjs utilizando fabSaveAsBase64. Esto guardará la información en una variable que después puedes enviar a un PDF (que no necesariamente tiene que estar en un IFrame) utilizando neoPdfImageBase64. Hasta donde yo se, no existe ninguna incompatibilidad.
Tanto si utilizas solo fabricjs como si utilizas los dos plugins, técnicamente se realiza la misma acción: se hace una "captura" del Container donde estás trabajando con fabricjs (del Canvas que hay en su interior, en realidad) y con ella se genera un PDF. Es irrelevante si lo que hay en el Container son imágenes externas o generadas por código.
Saludos.
Quote from rrey on August 6, 2021, 4:14 pm@luishp . De acuerdo, lo probaré. Aunque como el usuario ha de mover y situar las piezas del tangram, esto implicaría, en el caso de usar neoPdfImageBase64, capturar las coordendas de cada pieza movida antes de crear el pdf. Por otra parte neoPdfImageBase64 usa las coordenadas en unidades de mm mientras que fabrics trabaja en pixels. Por esta razón tome la decisión de hacer el programa con fabrics ya que crea el pdf y situa os objetos en las coordenadas basadas en pixels.
Bueno ya probaré a ver cómo se puede solucionar.
Mil gracias.
Roger
@luishp . De acuerdo, lo probaré. Aunque como el usuario ha de mover y situar las piezas del tangram, esto implicaría, en el caso de usar neoPdfImageBase64, capturar las coordendas de cada pieza movida antes de crear el pdf. Por otra parte neoPdfImageBase64 usa las coordenadas en unidades de mm mientras que fabrics trabaja en pixels. Por esta razón tome la decisión de hacer el programa con fabrics ya que crea el pdf y situa os objetos en las coordenadas basadas en pixels.
Bueno ya probaré a ver cómo se puede solucionar.
Mil gracias.
Roger
Quote from luishp on August 6, 2021, 5:29 pm@rrey creo que no nos estamos entendiendo...
esto implicaría, en el caso de usar neoPdfImageBase64, capturar las coordendas de cada pieza movida antes de crear el pdf. Por otra parte neoPdfImageBase64 usa las coordenadas en unidades de mm mientras que fabrics trabaja en pixels.
No es necesario. Con fabSaveAsBase64 capturas el Container completo con todas las imágenes que hay en él como una sola imagen. Con neoPdfImageBase64 simplemente indicas a que tamaño quieres mostrar esa imagen en el PDF.
Saludos y gracias a ti.
@rrey creo que no nos estamos entendiendo...
esto implicaría, en el caso de usar neoPdfImageBase64, capturar las coordendas de cada pieza movida antes de crear el pdf. Por otra parte neoPdfImageBase64 usa las coordenadas en unidades de mm mientras que fabrics trabaja en pixels.
No es necesario. Con fabSaveAsBase64 capturas el Container completo con todas las imágenes que hay en él como una sola imagen. Con neoPdfImageBase64 simplemente indicas a que tamaño quieres mostrar esa imagen en el PDF.
Saludos y gracias a ti.
Quote from rrey on August 6, 2021, 8:08 pm@luishp Acabo de probarlo de esta forma:
neoPdfInit "mi_pdf" "A4" "landscape"
fabSaveAsBase64 "Container1" [captura]
neoPdfImageBase64 "mi_pdf" "[captura]" "PNG" 1 1 900 800
neoPdfAutoPrint "mi_pdf"
No sé si es correcto pero no obtengo ningún resultado. Los dos plugins está inicializados.
@luishp Acabo de probarlo de esta forma:
neoPdfInit "mi_pdf" "A4" "landscape"
fabSaveAsBase64 "Container1" [captura]
neoPdfImageBase64 "mi_pdf" "[captura]" "PNG" 1 1 900 800
neoPdfAutoPrint "mi_pdf"
No sé si es correcto pero no obtengo ningún resultado. Los dos plugins está inicializados.
Quote from luishp on August 6, 2021, 8:12 pm@rrey
neoPdfImageBase64 "mi_pdf" "[captura]" "PNG" 1 1 900 800
fíjate que estás creando una imagen de 90 cm. (casi un metro) en un DIN A4 (un folio)
neoPdfImageBase64 "mi_pdf" "[captura]" "PNG" 1 1 900 800
fíjate que estás creando una imagen de 90 cm. (casi un metro) en un DIN A4 (un folio)
Quote from rrey on August 6, 2021, 10:45 pm@luishp Ya eso es verdad, pero el problema es que no genera ningún documento pdf con cualquier medida.
@luishp Ya eso es verdad, pero el problema es que no genera ningún documento pdf con cualquier medida.
Quote from luishp on August 7, 2021, 11:01 am@rrey a mi no me da ningún problema. Adjunto ejemplo.
Saludos.
@rrey a mi no me da ningún problema. Adjunto ejemplo.
Saludos.
- You need to login to have access to uploads.
Quote from rrey on August 7, 2021, 4:19 pm@luishp Es curioso porque funciona en tu ejemplo pero cuando añado esas funciones en mi programa me sale el error:
Error in function Object.: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
Este error se produce cuando se ejecuta la última línea que corresponde a:
neoPdfRender "pdf1" "IFrame1"
Parece como que no puede incluir todos los caracteres que codifica fabSaveAsBase64
He estado revisando y comparando el ejemplo que has enviado y mi programa y no veo diferencias. También he consultado el problema aquí y tampoco soy capaz de solucionar el problema.
Gracias por tu tiempo.
@luishp Es curioso porque funciona en tu ejemplo pero cuando añado esas funciones en mi programa me sale el error:
Error in function Object.: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
Este error se produce cuando se ejecuta la última línea que corresponde a:
neoPdfRender "pdf1" "IFrame1"
Parece como que no puede incluir todos los caracteres que codifica fabSaveAsBase64
He estado revisando y comparando el ejemplo que has enviado y mi programa y no veo diferencias. También he consultado el problema aquí y tampoco soy capaz de solucionar el problema.
Gracias por tu tiempo.
Quote from luishp on August 8, 2021, 8:22 am@rrey es posible que pueda solucionarlo pero necesitaría un ejemplo donde pueda ver el error ya que aquí no puedo reproducirlo.
Gracias!!
@rrey es posible que pueda solucionarlo pero necesitaría un ejemplo donde pueda ver el error ya que aquí no puedo reproducirlo.
Gracias!!
Quote from rrey on August 9, 2021, 11:18 am@luishp Al final me ha funcionado bien con neoPdfDownload y repeta todos los colores.
Aprovecho para presentarte otra duda sobre el uso de una clase para poner un icono en un botón. La calse es esta:
<i class="fa fa-copy fa-lg"></i> que la pongo en la propiedad título del botón. Pero veo que en el archivo de muestra demo de fabrics funciona, pero si creo un doumento nuevo no funciona. Se trata del icono duplicado. ¿Faltaría configurar algo más?
Muchas gracias de nuevo y saludos.
Roger Rey
@luishp Al final me ha funcionado bien con neoPdfDownload y repeta todos los colores.
Aprovecho para presentarte otra duda sobre el uso de una clase para poner un icono en un botón. La calse es esta:
<i class="fa fa-copy fa-lg"></i> que la pongo en la propiedad título del botón. Pero veo que en el archivo de muestra demo de fabrics funciona, pero si creo un doumento nuevo no funciona. Se trata del icono duplicado. ¿Faltaría configurar algo más?
Muchas gracias de nuevo y saludos.
Roger Rey
Quote from luishp on August 9, 2021, 5:30 pm@rrey esa clase necesita que cargues primero en la aplicación los iconos de Font Awesome.
Te adjunto un ejemplo para que veas como se hace fácilmente y puedas ver los iconos también mientras diseñas la aplicación.Saludos.
@rrey esa clase necesita que cargues primero en la aplicación los iconos de Font Awesome.
Te adjunto un ejemplo para que veas como se hace fácilmente y puedas ver los iconos también mientras diseñas la aplicación.
Saludos.
Uploaded files:- You need to login to have access to uploads.
Quote from rrey on August 10, 2021, 11:59 am@luishp Los iconos se ven en tiempo de diseño pero no de ejecución tanto en el ejemplo que me has enviado como en el programa que estoy hacuendo. No sé qué puede psasar.
Saludos,
Roger Rey
@luishp Los iconos se ven en tiempo de diseño pero no de ejecución tanto en el ejemplo que me has enviado como en el programa que estoy hacuendo. No sé qué puede psasar.
Saludos,
Roger Rey
Quote from luishp on August 10, 2021, 12:15 pm@rrey te lo adjunto corregido. Simplemente he copiado la misma linea con la etiqueta <link> en:
Project > Properties > Advanced > HeadConfirmame por favor que ahora si te funciona.
Saludos.
@rrey te lo adjunto corregido. Simplemente he copiado la misma linea con la etiqueta <link> en:
Project > Properties > Advanced > Head
Confirmame por favor que ahora si te funciona.
Saludos.
Uploaded files:- You need to login to have access to uploads.
Quote from rrey on August 10, 2021, 1:25 pm@luishp Funciona perfectamente. Te dejo aquí lo que estoy haciendo sobre el tangram, está sin acabar.. He intentado ver si había alguna función que pudiera cambiar el color de las figuras que corresponden con imagenes de mapas de bits externas pero creo que no existe una función para hacerlo.
https://genmagic.net/mates/tangram
Muchas gracias!!
Roger Rey
@luishp Funciona perfectamente. Te dejo aquí lo que estoy haciendo sobre el tangram, está sin acabar.. He intentado ver si había alguna función que pudiera cambiar el color de las figuras que corresponden con imagenes de mapas de bits externas pero creo que no existe una función para hacerlo.
https://genmagic.net/mates/tangram
Muchas gracias!!
Roger Rey