如何使用 Canvas 显示 JavaScript 对象？

Question

我有一个新项目，我正在构建一个全新的网站。

现在我想做我自己的验证码。为此，我使用 hertzen.

中的 html2canvas 库

到目前为止，还不错。我可以将主页上的固定节点转换为图像 return。但是我现在要做的是创建一种带有 JavaScript 和 return 的“假”节点作为图像。

这是我尝试过的：

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)));
}

我的 trie 的实际结果是 empty picture。

如果需要，这里是 image_string 变量：

let image_string = "eyIxIjoiUEhVK2N6d3ZkVDQ4YVQ1YVBDOXBQanhwUGpVOEwyaytjenhpUGpROEwySStORHhwUGpROEwyaytWenhpUGpNOEwySSsifQ==";

我有来自 here 的 HTML2Canvas 的原件。

所以你可以看到预期的功能。

如果有人能帮助我，我会很高兴。

Answer 1

我自己解决了

首先，我需要在元素值中拆分 image_string。这是必需的，因为 image_string 是一个完整的字符串类型。然后将值依次写入数组进行迭代。

    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(' ');

在迭代中我创建新的子节点并将它们写在一起。

    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);
    }

迭代后，我在我的 HTML 文件中创建了一个占位符 div 容器。现在需要填写占位符。

    const placeholderElement = document.getElementById("eyIxI");
    placeholderElement.appendChild(newDiv);

我还向上拉了 getCaptchaCheck_code 函数以确保它在 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);
        },
    });

如您在最后一段代码中所见，placeholderElement 将删除“验证码文本”。

代码现在 100% 有效。

尽情享受吧。

如何使用 Canvas 显示 JavaScript 对象？

How can I display a JavaScript Object with Canvas?

javascript

canvas

html2canvas