关于 chrome 安全问题的画布 toDataURL()

Question

我在 chrome 上遇到了 Canvas 的问题。我知道这被提到了很多，但我找不到适合我的解决方案。

基本上，我正在设计一个执行以下步骤的网站：
- 将 SVG 图像模板从托管服务器加载到对象中。
- 处理 SVG（着色、隐藏和显示图层等...）
- 然后将处理后的版本发送到服务器以插入 pdf 文档并通过电子邮件发送。

我的问题是最后一步。我使用的方法包括：
- 获取 SVG 的内容文档并序列化其 XML。

 var s = new XMLSerializer();
 svg = document.getElementById('theSVG').contentDocument;
 var xmlTest = s.serializeToString(svg);

• 使用 onLoad 函数定义一个新图像并将 src 应用到它：

  drawnImage.src = 'data:image/svg+xml,' + escape(xmlTest);

• 创建一个画布元素并将该图像绘制到其中：

  var canvas = document.createElement('canvas'); var cont = canvas.getContext('2d'); cont.drawImage(drawnImage, 0, 0, canvas.width, canvas.height);

• 最后一步是从 canvas 元素中提取 dataURI，如下所示：

var ImageDataURl = canvas.toDataURL();

之后，数据（base64）被发送到服务器，转换为位图并保存为服务器磁盘上的 jpeg 图像，然后作为大 pdf 文档的一部分插入。

一切都很顺利，直到我在 chrome 上对其进行了测试，然后我遇到了以下安全错误：

未捕获的安全错误：试图突破 用户代理的安全策略

当我读到这个错误时，我知道这是跨域图像的 chrome 安全问题，等等。我想知道的是：
- 在用户浏览器上创建新画布并将图像加载到其中是否被视为来自另一个域的文件？
- 即使它是服务器端（我正在使用 C#），我不介意是否有解决方法。我尝试上传 SVG XML 并尝试将其转换为 base64 字符串，但没有成功。

任何帮助将不胜感激。

Answer 1

问题的一个原因是当您为图像使用另一个“域”时......

如果您尝试从域的 Url 中使用 toDataUrl，它会起作用，否则不会。

我找到this answer

然后我添加了

access-control-allow-origin: *
access-control-allow-credentials: true

在我的服务器上，但这不起作用...

最后我尝试了this。我只是放了一个 img.crossOrigin = "Anonymous";和标题

这确实奏效了。

Answer 2

我通过使用fabric js 解决了这个问题。很棒的图书馆。代码如下：

var a = document.getElementById("theSVG"); //This is the <object>
a.setAttribute('data', 'worldmap.svg'); //Setting the data attribute to the svg file


a.onload = function () {

    var svgDoc = a.contentDocument;
    var s = new XMLSerializer();
    var xml = s.serializeToString(svgDoc);


    var canvas = new fabric.Canvas('canvas');

    var svg = xml;

    fabric.loadSVGFromString(svg, function (objects, options) {
        var loadedObject = fabric.util.groupSVGElements(objects, options);
        canvas.add(loadedObject);
        canvas.calcOffset();
        canvas.renderAll();
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('This browser doesn\'t provide means to serialize canvas to an image');
        }
        else {
            window.open(canvas.toDataURL('png'));
        }

    });
}

这解决了 .toDataURL() 问题。但是我的 SVG 文件存在问题。希望这会有所帮助。

Answer 3

嗨，我正在做如下。我没有收到任何错误。希望对您有所帮助。

<script type="text/javascript">

$("#exportButton").click(function() { 

    html2canvas( [ document.getElementById("divId_for_Pdf") ], {
       onrendered: function(canvas) {
           var dataUrl = canvas.toDataURL();
         // $('#img1').attr('src',dataUrl);
           var action ='saveChartData';
            var data="dataUrl="+dataUrl;
           $.ajax({url:action, data:data, dataType:'text',type:'POST',cache:false,
               success: function(data) {
                 //alert("success..........!")
                   window.location.href = "${grailsApplication.config.grails.serverURL}/adminConfig/downloadAnalyticsChart?tenantName=${tenantInstance?.tenantName}&from=Dashboard"
               },
               error: function(request, status, error) {
                   alert('error');
               },
               complete: function(data){

               }
           });

       }
   });
});        

</script>

Answer 4

在 Chrome 上，将 SVG 图像加载到画布中会污染画布，这意味着您无法从中读取任何数据，尽管您仍然可以对其进行写入。它似乎是 fixed recently in Chrome，前提是您避免使用某些 SVG 元素，例如 <foreignObject>，所以它可能很快就会出现在 Chrome 发布版本中。

与此同时，也许您可​​以使用不会污染画布的 Firefox。