Tengo un nuevo proyecto, donde estoy construyendo un sitio web completamente nuevo.
Ahora quiero hacer mi propio captcha. Para esto utilizo la librería html2canvas de hertzen .
Hasta aquí todo bien. Puedo convertir nodos fijos que están en la página principal y devolverlos como una imagen. Pero lo que intento hacer ahora es crear una especie de nodo "falso" con JavaScript y devolverlo como una imagen.
Esto es lo que probé:
image_string = getCaptchaCheck_code(image_string).split("\""); image_string = image_string[3]; image_string = getCaptchaCheck_code(image_string) let fakeObject = '<div id="talltweets">'+image_string+'</div>'; let temp = document.createElement('div'); temp.innerHTML = fakeObject; let htmlObject = temp.firstChild; html2canvas(htmlObject, { onrendered: function (canvas) { var screenshot = canvas.toDataURL("image/jpg"); document.getElementById("textScreenshot").setAttribute("src", screenshot); captcha = document.getElementById("textScreenshot").value; }, }); function getCaptchaCheck_code(str) { return decodeURIComponent(escape(this.atob(str))); }Mi resultado real con mi trie es una imagen vacía .
Si es necesario, aquí está la variable image_string:
let image_string = "eyIxIjoiUEhVK2N6d3ZkVDQ4YVQ1YVBDOXBQanhwUGpVOEwyaytjenhpUGpROEwySStORHhwUGpROEwyaytWenhpUGpNOEwySSsifQ==";Tengo el original para HTML2Canvas desde aquí .
Entonces allí puedes ver cuál es la función que se espera.
Sería feliz si alguien me puede ayudar con esto.
Lo resolví por mi cuenta.
En primer lugar, necesitaba dividir image_string en valores de elementos. Esto es necesario porque image_string es un tipo completamente de cadena. Los valores, a su vez, se escriben en una matriz para la iteración.
let image_string = "eyIxIjoiUEdJK1pUd3ZZajQ4ZFQ1UlBDOTFQanhwUGtVOEwyaytQSFUrZVR3dmRUNTBRVHgxUGpBOEwzVStQR2srZUR3dmFUNDhkVDVZUEM5MVBnPT0ifQ=="; image_string = getCaptchaCheck_code(image_string).split("\""); image_string = image_string[3]; image_string = getCaptchaCheck_code(image_string) var nodeText = ""+image_string+"" var newDiv = document.createElement("div"); newDiv.setAttribute('id', 'talltweets') var childDiv = document.createElement("div"); var regex = /([<][\/][a-zA-Z0-9][>])/gm; var newstr = nodeText.replace(regex, " ") regex = /([<][a-zA-Z0-9][>])/gm; newstr = newstr.replace(regex, "") var letter = newstr.split(' ');En la iteración, creo nuevos nodos secundarios y los escribo juntos.
for (var i = 0; i < letter.length; i++) { var node = nodeText[nodeText.indexOf(letter[i])-2]; childNode = document.createElement(node); childNodeText= document.createTextNode(letter[i]); childNode.appendChild(childNodeText); newDiv.appendChild(childNode); }Después de la iteración, creé un contenedor div de marcador de posición en mis archivos HTML. Ahora el marcador de posición necesita ser llenado.
const placeholderElement = document.getElementById("eyIxI"); placeholderElement.appendChild(newDiv); También saqué la función getCaptchaCheck_code para asegurarme de que se cargue antes que la función html2canvas .
function getCaptchaCheck_code(str) { return decodeURIComponent(escape(this.atob(str))); } html2canvas(document.getElementById("talltweets"), { onrendered: function (canvas) { var screenshot = canvas.toDataURL("image/png"); document.getElementById("textScreenshot").setAttribute("src", screenshot); placeholderElement.removeChild(newDiv); }, }); Como puede ver en el último código, placeholderElement eliminará el "texto captcha".
El código funciona ahora al 100%.
Disfrutar.