{"id":294,"date":"2026-05-20T09:49:46","date_gmt":"2026-05-20T14:49:46","guid":{"rendered":"https:\/\/kyouru.jhoncon.com\/?p=294"},"modified":"2026-05-26T20:39:12","modified_gmt":"2026-05-27T01:39:12","slug":"sticker-resource","status":"publish","type":"post","link":"https:\/\/kyouru.jhoncon.com\/?p=294","title":{"rendered":"Sticker Resource"},"content":{"rendered":"<table style=\"text-align: center; vertical-align: middle; padding: 8px;\">\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img1\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker1\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia1\">Copiar<\/button><\/p>\n<p>    <button id=\"descargar1\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img2\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker2\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia2\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar2\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img3\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker3\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia3\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar3\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img4\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker4\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia4\">Copiar<\/button><\/p>\n<p>    <button id=\"descargar4\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img5\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker5\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia5\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar5\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img6\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker6\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia6\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar6\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img7\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker7\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia7\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar7\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img8\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker8\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia8\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar8\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img9\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker9\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia9\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar9\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img10\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker10\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia10\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar10\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img11\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker11\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia11\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar11\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img12\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker12\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia12\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar12\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img13\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker13\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia13\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar13\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img14\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker14\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia14\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar14\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img15\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker15\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia15\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar15\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img16\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker16\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia16\">Copiar<\/button><\/p>\n<p>      <button id=\"descargar16\">Descargar<\/button><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 5px; vertical-align: middle;\">\n      <img id=\"img17\" alt=\"Preview\" style=\"width: 128px; height: auto; display: inline-block;\" \/>\n    <\/td>\n<td><label id=\"sticker17\"><\/label><\/td>\n<td style=\"vertical-align: middle;\"><button id=\"copia17\">Copiar<\/button><\/p>\n<p>        <button id=\"descargar17\">Descargar<\/button><\/td>\n<\/tr>\n<\/table>\n<p><!-- Overlay oculto --><\/p>\n<div id=\"overlay\" style=\"\n  position:fixed;\n  top:50%;\n  left:50%;\n  transform:translate(-50%, -50%);\n  background:#333;\n  color:#fff;\n  padding:20px 40px;\n  border-radius:8px;\n  font-size:20px;\n  opacity:0;\n  visibility:hidden;\n  transition:opacity 0.5s ease;\n  z-index:9999;\n\">\u00a1Copiado!<\/div>\n<p><script>\nfunction toClipboard(texto) {\n  navigator.clipboard.writeText(texto).then(() => {\n    const overlay = document.getElementById(\"overlay\");\n    overlay.style.visibility = \"visible\";\n    overlay.style.opacity = \"1\";\n    setTimeout(() => {\n      overlay.style.opacity = \"0\";\n      overlay.style.visibility = \"hidden\";\n    }, 2000);\n  });\n};\nfunction descargarJSON(nombre, contenido) {\n  const nombreArchivo = nombre.endsWith('.json') ? nombre : nombre + '.json';\n  const blob = new Blob([contenido], { type: 'application\/json;charset=utf-8;' });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = nombreArchivo;\n  document.body.appendChild(link);\n  link.click();\n  document.body.removeChild(link);\n  URL.revokeObjectURL(url);\n};\nfunction inicializarStickerFila(archivoJson, ids) {\n  fetch(`\/stickers_json\/${archivoJson}`)\n    .then(response => {\n      if (!response.ok) throw new Error(`No se pudo cargar: ${archivoJson}`);\n      return response.json();\n    })\n    .then(data => {\n      \/\/ 1. Inyectar el nombre en el label\n      const labelElement = document.getElementById(ids.idLabel);\n      if (labelElement) labelElement.textContent = data.name;\n      \/\/ 2. Inyectar la primera imagen en el tag img (buscando el primer base64 disponible)\n      const imgElement = document.getElementById(ids.idImg);\n      if (imgElement && data.stickers && data.stickers[0] && data.stickers[0].image_base64) {\n        imgElement.src = `data:image\/webp;base64,${data.stickers[0].image_base64}`;\n      }\n      \/\/ 3. Asignar evento al bot\u00f3n de Copiar al portapapeles\n      const btnCopia = document.getElementById(ids.idBtnCopia);\n      if (btnCopia) {\n        btnCopia.addEventListener(\"click\", () => {\n          toClipboard(JSON.stringify(data)); \n        });\n      }\n      \/\/ 4. Asignar evento al bot\u00f3n de Descargar archivo .json\n      const btnDescarga = document.getElementById(ids.idBtnDescarga);\n      if (btnDescarga) {\n        btnDescarga.addEventListener(\"click\", () => {\n          descargarJSON(data.name, JSON.stringify(data));\n        });\n      }\n    })\n    .catch(error => console.error(\"Error procesando sticker:\", error));\n  };\n  inicializarStickerFila('Familia.json', {\n    idImg: 'img1',\n    idLabel: 'sticker1',\n    idBtnCopia: 'copia1',\n    idBtnDescarga: 'descargar1'\n  });\n  inicializarStickerFila('Citlali.json', {\n    idImg: 'img2',\n    idLabel: 'sticker2',\n    idBtnCopia: 'copia2',\n    idBtnDescarga: 'descargar2'\n  });\n  inicializarStickerFila('Columbina.json', {\n    idImg: 'img3',\n    idLabel: 'sticker3',\n    idBtnCopia: 'copia3',\n    idBtnDescarga: 'descargar3'\n  });\n  inicializarStickerFila('Escoffier.json', {\n    idImg: 'img4',\n    idLabel: 'sticker4',\n    idBtnCopia: 'copia4',\n    idBtnDescarga: 'descargar4'\n  });\n  inicializarStickerFila('Fischl.json', {\n    idImg: 'img5',\n    idLabel: 'sticker5',\n    idBtnCopia: 'copia5',\n    idBtnDescarga: 'descargar5'\n  });\n  inicializarStickerFila('Furina.json', {\n    idImg: 'img6',\n    idLabel: 'sticker6',\n    idBtnCopia: 'copia6',\n    idBtnDescarga: 'descargar6'\n  });\n  inicializarStickerFila('Jahoda.json', {\n    idImg: 'img7',\n    idLabel: 'sticker7',\n    idBtnCopia: 'copia7',\n    idBtnDescarga: 'descargar7'\n  });\n  inicializarStickerFila('Nefer.json', {\n    idImg: 'img8',\n    idLabel: 'sticker8',\n    idBtnCopia: 'copia8',\n    idBtnDescarga: 'descargar8'\n  });\n  inicializarStickerFila('CZN1.json', {\n    idImg: 'img9',\n    idLabel: 'sticker9',\n    idBtnCopia: 'copia9',\n    idBtnDescarga: 'descargar9'\n  });\n  inicializarStickerFila('CZN2.json', {\n    idImg: 'img10',\n    idLabel: 'sticker10',\n    idBtnCopia: 'copia10',\n    idBtnDescarga: 'descargar10'\n  });\n  inicializarStickerFila('Hu Tao.json', {\n    idImg: 'img11',\n    idLabel: 'sticker11',\n    idBtnCopia: 'copia11',\n    idBtnDescarga: 'descargar11'\n  });\n  inicializarStickerFila('Klee.json', {\n    idImg: 'img12',\n    idLabel: 'sticker12',\n    idBtnCopia: 'copia12',\n    idBtnDescarga: 'descargar12'\n  });\n  inicializarStickerFila('Mualani.json', {\n    idImg: 'img13',\n    idLabel: 'sticker13',\n    idBtnCopia: 'copia13',\n    idBtnDescarga: 'descargar13'\n  });\n  inicializarStickerFila('Nicole.json', {\n    idImg: 'img14',\n    idLabel: 'sticker14',\n    idBtnCopia: 'copia14',\n    idBtnDescarga: 'descargar14'\n  });\n  inicializarStickerFila('Skirk.json', {\n    idImg: 'img15',\n    idLabel: 'sticker15',\n    idBtnCopia: 'copia15',\n    idBtnDescarga: 'descargar15'\n  });\n  inicializarStickerFila('Shinobu.json', {\n    idImg: 'img16',\n    idLabel: 'sticker16',\n    idBtnCopia: 'copia16',\n    idBtnDescarga: 'descargar16'\n  });\n  inicializarStickerFila('Varesa.json', {\n    idImg: 'img17',\n    idLabel: 'sticker17',\n    idBtnCopia: 'copia17',\n    idBtnDescarga: 'descargar17'\n  });\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar Copiar Descargar<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-294","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":46,"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=\/wp\/v2\/posts\/294\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=\/wp\/v2\/posts\/294\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kyouru.jhoncon.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}