Merge image jpg with SVG

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

This would be the desired result:

1.jpg

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.

0 4 242
4 REPLIES 4

You need to convert the image to base64

Thanks @Kabuliño 

Can you explain me that?

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

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

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

activar script base64.png

escribir respuesta base64.png

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 




Wow! it's very complex
I'll try to do it
Thanks!! @Kabuliño 

Top Labels in this Space