Merge image jpg with SVG

AppSheet AppSheet Q&A
, , , ,
1

Hi!

I have a problem to concatenate a column [IMAGE] with SVG code.
I created a virtual column called [IMAGE_SVG] with this code:

IF (CONTAINS([PRODUCT], "-BOX"),
CONCATENATE("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' fill='rgb(197,158,122)' width='300' height='300' viewBox='-150 -400 900 900'>
<image href=',[IMAGE],'/>
<rect width=""70%"" height=""40%"" rx=""90"" fill=""lightbrown""/>
<text font-family=""Roboto Condensed,Arial,sans-serif""
  fill=""white"" font-size=""200px"" font-weight=""bold""
  text-anchor=""middle"" x=""35%"" y=""27%"">
  BOX
</text></svg>"),
[IMAGE]
)

The idea is to display the image with a label below, but I can’t get the jpg image of each product to be displayed. Only show this:

2.jpg
2.jpg158Ă—164 2.75 KB

This would be the desired result:

1.jpg
1.jpg158Ă—172 4.32 KB

I was reading all the posts and I didn’t find the solution, I know that the SVG code is complex when you make a mistake in a comma or punctuation.

2

You need to convert the image to base64

1 Like
3

Thanks @Kabulino

Can you explain me that?

I use a column [IMAGE] with 1000 products, how to convert images to base64?

4

this link may interest you
https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Image-within-SVG/td-p/552619

Sinceramente no pude automatizar bien el proceso pero te comparto lo que logré, quizá te ayude de algo

1.- Crear una tabla "Base64" con las siguientes columnas

Tabla base64.png
Tabla base64.png1154Ă—743 66.7 KB

Las fĂłrmulas son las siguientes:
Para [URL_Imagen]

CONCATENATE(
"https://www.appsheet.com/image/getimageurl",
"?appName=", ENCODEURL(CONTEXT("AppName")),
"&tableName=", ENCODEURL(CONTEXT("Table")),
"&fileName=", ENCODEURL([IMG])
)

Para [Imagen_Base64] y para [Texto_Base64]

CONCATENATE("data&colon;image/png;base64,",[Parte1],[Parte2],[Parte3],[Parte4],[Parte5])

(El número de partes depende de qué tan grande es la imágen)

2.- Crear un script en appscript
Convertir imagen a Base64

function convertirImagenABase64(urlImagen) {

var imagen = UrlFetchApp.fetch(urlImagen).getBlob();
var base64 = Utilities.base64Encode(imagen.getBytes());

var partes = dividirCadena(base64, 49990);
return partes;
}

function dividirCadena(cadena, longitud) {
var partes = [];
var index = 0;

while (index < cadena.length) {
partes.push(cadena.substring(index, index + longitud));
index += longitud;
}

return partes;
}

La idea de este script es que te transforma la imagen a Base64, y divide el resultado en partes de 49990 caracteres (Con la finalidad de no superar el lĂ­mite por celda en GSheets)

3.- Configurar un Bot para ejecutar el script

configuraciĂłn bot base64.png
configuraciĂłn bot base64.png1567Ă—806 68 KB

activar script base64.png
activar script base64.png1127Ă—824 77.8 KB

escribir respuesta base64.png
escribir respuesta base64.png1309Ă—756 59.7 KB

Las fĂłrmulas serĂ­an:
Parte1 = INDEX([IMG a Base64].[Output],1)
Parte2 = INDEX([IMG a Base64].[Output],2)
Parte3 = INDEX([IMG a Base64].[Output],3)
Parte4 = INDEX([IMG a Base64].[Output],4)
Parte5 = INDEX([IMG a Base64].[Output],5)

Mi intención era que el script se ejecutara al agregar o editar, pero como las imágenes tardan en subirse el script se ejecuta antes de que la imagen esté disponible resultando en error

Para ejecutar el script puedes editar y guardar sin realizar cambios, o agregar una columna que te sirva como desencadenante o trigger del bot

1 Like
5

Wow! it’s very complex
I’ll try to do it
Thanks!! @Kabulino