如何使用 Canvas 显示 JavaScript 对象？

Question

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

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

到目前为止，一切都很好。我可以转换主页上的固定节点并将它们作为图像返回。但我现在要做的是用 JavaScript 创建一种“假”节点并将其作为图像返回。

这是我尝试过的：

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% 工作。

享受吧。