将两个javascript图像合并到url

Question

我一直在研究这个问题，我似乎找不到任何有这个问题或类似问题的东西。我使用javascript来创建测验，当用户获得测验结果时，他们会生成一个图像和他们的Facebook个人资料图像。

我想要做的是，当他们获得这些图像时，他们就可以在Facebook上共享图像，合并为一体。目前我有一个正在运行的演示 here，您可以在其中看到我正在谈论的结果。

我的facebook图片代码是：

function getPhoto()
{
  FB.api('/me/picture?type=normal', function(response) {
      console.log(response.data.url);
      var str="<br/><img class='fbImage' src='"+response.data.url+"'/>";
      document.getElementById("quizResultsCopy").innerHTML+=str;

});

在外部javascript文件中，结果图像位于：

 (plugin.method.inRange(0.0, 0.19, percent)) {
                level = 4;

                getPhoto();
                 div.innerHTML +=  'What can we say – green is definitely your colour. And kudos on scoring some of thebest real estate in the world! With cawfee in your blood and the smoky scent of hawt dawgs whipping around your (colossal) nose, you are the epitome of freedom and friendship. Your warm, welcoming personality can light up a room (or a harbour) and your social calendar is out of control; people literally line up for hours to see you. We suspect sitting down to a recording of Saturday Night Live or enjoying a boozy mimosa brunch are high on your travel bucket list. If not, you better update your list ;) <br> <br> <button id="shareonfacebook" onclick="shareonfb()" >ShareOnFaceBook</button> <br> <br> <img class="quizImage" src="resultimg.png" width="800"> ';

            }

我不确定我是否提供了所有相关代码，如果我还没有提供更多相关代码。