Crop a .png image before to get it as a base64-encoded string passed to clipboard

Pablo Gonzalez Mora shared this question 2 weeks ago
Answered

Hi.

I am adding a feature to my applet (attached). I want to get a .png screenshot as a base64-encoded string passed to the clipboard. I am using JavaScript. The script is working (left button.)


Could I crop the image (say, area constrained by G and H points) before to get the encoded string? (like the cropping of the GeoGebra command ExportImage with Export_1 and Export_2 points.) Please, help me.


I have tried to set the coordinate system (with the setCoordSystem command; right button), but the result of the factor x Axis : y Axis is no good (it should be 1:1; see the "circle" in the attached image).


d60c247d914890322770eebd963e0abb


P.D. Bonus question: I would like to get the .svg base 64 encoded string. Could I get it (for .svg)?


(In Spanish/En español:

Estoy incorporando una función a mi applet (ver archivo .ggb adjunto). Estoy tratando de pasar al portapapeles el texto codificado en forma base64 de la captura de la imagen .png de la vista gráfica. Estoy usando JavaScript. El guión está funcionando (botón izquierdo).

Sin embargo, me gustaría poder recortar la imagen (digamos, al área delimintada por los puntos G y H), antes de generar el texto codificado. ¿Podría hacerlo? ¿Cuáles instrucciones debería usar?

He intentado configurar los intervalos del sistema de coordenadas (con la instrucción setCoordSystem; botón derecho), pero el factor de escala Eje X : Eje Y se distorsiona (debería mantenerse en 1:1; ver el "círculo" en la imagen adjunta).

PD. Pregunta extra: ¿Podría obtener el texto codificado base64 para la imagen en formato .svg?)

Best Answer
photo

Could I crop the image (say, area constrained by G and H points) before to get the encoded string? (like the cropping of the GeoGebra command ExportImage with Export_1 and Export_2 points.)
Yes, use the Points Export_1 and Export_2

Comments (8)

photo
2

Could I crop the image (say, area constrained by G and H points) before to get the encoded string? (like the cropping of the GeoGebra command ExportImage with Export_1 and Export_2 points.)
Yes, use the Points Export_1 and Export_2

photo
1

Thanks a lot, Michael.

photo
photo
2

To get SVG as base64


svgBase64 = "data:image/svg+xml;base64," + btoa(svg);

Quick example http://test.geogebra.org/~m...

photo
1

Michael,


I got this error message:


"On Click botón1:

Error in JavaScript

(ReferenceError) : svg is not defined"

photo
1

I guess I have to pass the file gotten by the GeoGebra command ExportImage to a JavaScript object called svg. I am right? How could I to it?

photo
1

I guess I have to pass the file gotten by the GeoGebra command ExportImage to a JavaScript object called svg. I am right? How could I do it?

photo
2

Try using the string you get from ggbApplet.exportSVG()

photo
1

svg = ggbApplet.exportSVG()
works very well.


I have deleted the string "data:image/svg+xml;base64," +

The current line is:

svgBase64 = btoa(svg);
Should I keep the deleted string?


I have found the command copyTextToClipboard (reference: https://help.geogebra.org/topic/javascript-command-not-working-online; applet by Javier Cayetano Rodríguez: https://www.geogebra.org/m/qztwmfsu). So, I disabled the custom global JavaScript function copyStringToClipboard.


Great commands, and great answers: the applet crops between the points Export_1 and Export_2, and it takes a screenshot of the graphics view as .png or .svg. It converts the image to a base64-encoded string. Finally, the base64-encoded string is sent to the clipboard.


Thanks a lot, Michael.

photo
© 2019 International GeoGebra Institute