Question

0

193

Views

How can I display a JavaScript Object with Canvas?

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.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T15:06:06.369Z

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.

0

193

How can I display a JavaScript Object with Canvas?

1 answers

0

Find remote jobs

Andres GPT