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:
This would be the desired result:
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.
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
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:image/png;base64,",[Parte1],[Parte2],[Parte3],[Parte4],[Parte5])
(El número de partes depende de qué tan grande es la imágen)
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)
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
User | Count |
---|---|
27 | |
25 | |
24 | |
24 | |
16 |