Javascript - 每分钟编辑图像，更新图像

Question

我正在尝试制作Generator用户可以插入其战略网名称（名称）并让其输出其徽章（ data.characters [2]。 embemBackground ）以及它们在图像上的亮度级别（ data.characters [0] .light ）。

然后，我希望用户能够使用图片链接，例如：http://www.test.com/image.png

并使用API​​中的统计信息自动更新，因此它会覆盖图像而不更改URL。

结果：

我使用html2canvas捕获来获取图像本身（＃character2img ）

我确实意识到这可能不是解决这个问题的最好方法。

代码：

const { Client } = require('destiny2');
const client = new Client('apiKey');
const html2canvas = require('html2canvas');

window.memberName = function(){
    var pName = document.getElementById("pageheader");
    var pLl = document.getElementById('LightLevel');
    var pLl2 = document.getElementById('LightLevel2');
    var pLl3 = document.getElementById('LightLevel3');
    var gT = document.getElementById('Guardian');
    var gT2 = document.getElementById('Guardian2');
    var gT3 = document.getElementById('Guardian3');
    var divI = document.getElementById('character1img');
    var name = document.getElementById('search').value;

    client.getProfile(name, '4')
    .then(data => console.log(data));

    client.getProfile(name, '4').then(data => {
        pName.appendChild(document.createTextNode(`${data.profile.displayName}`));

// Character 1
    // Emblem Image
        var elem = document.createElement("img");
        elem.src = `http://bungie.net${data.characters[0].embemBackground}`;
        var image = document.getElementById('character1img').appendChild(elem);
    // Light Level
        pLl.appendChild(document.createTextNode(`♦ ${data.characters[0].light}`));
// Character 2
    // Emblem Image
        var elem = document.createElement("img");
        elem.src = `http://bungie.net${data.characters[1].embemBackground}`;
        var image2 = document.getElementById('character2img').appendChild(elem);
    // Light Level
        pLl2.appendChild(document.createTextNode(`♦ ${data.characters[1].light}`));
// Character 3
    // Emblem Image
        var elem = document.createElement("img");
        elem.src = `http://bungie.net${data.characters[2].embemBackground}`;
        var image2 = document.getElementById('character3img').appendChild(elem);
    // Light Level
        pLl3.appendChild(document.createTextNode(`♦ ${data.characters[2].light}`));
      });

}

window.screenshot = function(){
    html2canvas(document.querySelector("#character1img"), {allowTaint : true}).then(canvas => {
        document.body.appendChild(canvas)
    });
}

window.screenshot2 = function(){
    html2canvas(document.querySelector("#character2img"), {allowTaint : true}).then(canvas => {
        document.body.appendChild(canvas)
    });
}

window.screenshot3 = function(){
    html2canvas(document.querySelector("#character3img"), {allowTaint : true}).then(canvas => {
        document.body.appendChild(canvas)
    });
}