Canvas toDataURI（）在chrome安全问题上
我在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上测试出来，并且我遇到了一个安全错误：
未捕获的SecurityError：试图突破用户代理的安全策略
当我读到这个错误时，我知道这是跨域图像的铬安全问题，并且等等。 我想知道的是以下内容：
- 是否正在创建一个新的画布并将用户浏览器中的图像加载到其中，作为来自另一个域的文件处理？
- 是否有一个解决方法，即使它是服务器端（我使用C＃），我不介意。 我尝试上传SVG XML，并尝试将其转换为base64字符串，但没有运气。
任何帮助，将不胜感激。
在Chrome浏览器中，将一幅SVG图像加载到画布上会污染画布，这意味着您无法从中读取任何数据，尽管您仍然可以对其进行写入。 它似乎最近在Chrome中得到修复，前提是您避免使用某些SVG元素，例如<foreignObject>因此它可能很快就会在Chrome发布版本中使用。
同时，也许你可以使用Firefox而不会污染画布。
我通过使用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文件的问题。 希望这可以帮助。
你好，我正在做如下。 我没有得到任何错误。 希望这对你有所帮助。
<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>
上一篇: Canvas toDataURI() on chrome security issue
下一篇: drawImage() on canvas saturates colors and messes up alpha