Question

我使用html2canvas（来自html2canvas.hertzen.com）来捕获屏幕截图。我得到了这样一个奇怪的错误：我的网页代码放在一台主机上，比如主机A. 如果我的网页包含另一台主机上的图像，比如主机B，那么我点击了这个错误：跨源资源共享策略拒绝跨源图像加载

然而，令人困惑的部分是，如果主机B是Facebook（我的图像是直接链接到facebook https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/372701_100000684388457_1551561655_q.jpg），那么错误就会消失。

我的功能

html2canvas([document.body], {
                    useCORS : true,
                    logging : true,
                    onrendered : function(canvas) {
                        document.body.appendChild(canvas);
                        var myImage = canvas.toDataURL("image/png");
                        window.open(myImage);
                    }

有人有小费吗？ TKS

解决方案

 html2canvas([document.body], {
                                    useCORS: true,
                                    proxy: "Server",
                                    onrendered : function(canvas) {                               
                                        ListUCapture = canvas.toDataURL("image/png");                                                           
                                    }
                     });
Server is server of node.js

Answer 1

如果要将跨原始图像加载到画布，则需要使用跨源标题或在同一原点下提供图像。 Facebook下的图像提供以下标题选项集：

Access-Control-Allow-Origin:*

意思是，它可以使用useCORS选项加载跨源。但是，看起来您的主机B没有为它们提供跨源标头设置。

跨源资源共享策略拒绝跨源图像加载

1 个答案: