I got a new project, where I'm building a complete new website.
Now I want to do my own captcha. For this I use the html2canvas library from hertzen.
So far, so good. I can convert fixed nodes which are on the main page and return them as an image. But what I'm trying to do now is to create a kind of "fake" node with JavaScript and return it as an image.
Here is what I tried:
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)));
}
My actual result with my trie is an empty picture.
If needed, here is the image_string variable:
let image_string = "eyIxIjoiUEhVK2N6d3ZkVDQ4YVQ1YVBDOXBQanhwUGpVOEwyaytjenhpUGpROEwySStORHhwUGpROEwyaytWenhpUGpNOEwySSsifQ==";
I have the original for the HTML2Canvas from here.
So there you can see what the function is expected.
I would be happy if someone can help me with this.
I solved it by my own.
First of all I needed to split the image_string in element values. This is needed because the image_string is a fully string type. The values in turn are written then to an array for iteration.
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(' ');
In the iteration I create new child nodes and write them together.
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);
}
After the iteration I created an placeholder div container in my HTML files. Now the placeholder needs to be filled up.
const placeholderElement = document.getElementById("eyIxI");
placeholderElement.appendChild(newDiv);
I also pulled the getCaptchaCheck_code function up to make sure it is loaded before the html2canvas function.
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);
},
});
As you can see in the last code, the placeholderElement will remove the "captcha text".
The code works now for 100%.
Enjoy.