Javascript 为什么图像不是div的一部分？如何将其添加到DOM中？

我在rightcontainer div中只有一个按钮和一个图像。当我单击按钮时，应该会看到该div的屏幕截图。确实如此，但图像并不仅仅显示文字。我读到了，我想是因为图像不在div-DOM中。如何使图像成为div的一部分，使其也出现在屏幕截图中

$.drag.draggable； $.drag.dropable； var takeScreenShot=函数{ html2canvasdocument.getElementByIdcontainer{ onrendered:functioncanvas{ var tempcanvas=document.createElement'canvas'； tempcanvas.width=350； tempcanvas.height=350； var context=tempcanvas.getContext'2d'； context.drawImagecanvas，112,0288200,0,0350350； var link=document.createElementa； link.href=tempcanvas.toDataURL'image/jpg'；//函数块CORS link.download='screenshot.jpg'； link.click； } }; } 快照 左侧 拖动-------> & 单击Snapppppppppppppppppp 右侧

---

这里的问题是图像来自外部网站。html2canvas将只处理与HTML文件来源相同的图像，即相同的web域

解决这个问题的一个潜在方法是使用某种代理，但最好的解决方案可能是下载图像并将其与您的网站一起提供

您可以阅读更多关于html2canvas的文章。此问题列在限制部分下，如果您有兴趣使用代理来解决此问题，将对其进行讨论

其次，您使用的是旧版本的html2canvas。下载，然后使用此版本替换takeScreenShot函数，因为新API使用承诺而不是回调：

var takeScreenShot = function() { 
    html2canvas(document.getElementById("container")).then(canvas=>{
        var link = document.createElement("a");
        link.href = canvas.toDataURL('image/jpg');
        link.download = 'screenshot.jpg';
        link.click();
    })
}

---

这将创建正确的输出，您可以通过在var链接行之前执行document.body.appendChildcanvas来测试，但是您将无法下载它，因为画布将被污染。要解决此问题，您必须在某种本地服务器上运行该站点，例如，如果您还没有这样做。

非常感谢。我试图下载图片并将其添加到我的目录中。但还是一样的问题。再次感谢您的浏览器控制台中有任何错误吗？另外，尝试清除缓存并重新加载页面。不，这是一件奇怪的事情！！！一切都很完美，图像正在拍摄和下载，但只显示div中的文字，而不是图像。@codeDojo我已经让它为我工作了，通过在本地服务器上运行它并更新正在使用的html2canvas版本-请参阅我对答案的最新编辑。