我正在尝试使用 phantomjs 将 svg 转换为 png 图像:
var page = require('webpage').create();
page.evaluate(function() {
var svg = '<svg class="tnt_tracks_svg" width="800" height="180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/\
xlink"><rect width="10" height="10" fill="red"></rect></svg>';
var src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));
var img = new Image();
img.src = src;
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var src = canvas.toDataURL(); // DOM Exception 18!
}
});
但是我在调用 toDataURL 时收到 DOM 异常 18。我在其他类似问题中看到,如果 svg 托管在其他域等中,则可能会发生这种情况......但在我的情况下,我提供了 svg src!。上面的代码有什么问题?为什么会触发 DOM 异常?
类似的代码在 jsfiddle 中看起来不错(没有 phantomjs,在 chrome 和 FF 中测试)。这个虚幻的例子也可以使用 fabric.js :
page.includeJs("http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js", function () {
page.evaluate(function() {
var svg_text = '<svg width="600" height="400"><g><rect width="10" height="10" fill="red"></rect></g></svg>';
fabric.loadSVGFromString(svg_text, function (objects, options) {
var loadedObject = fabric.util.groupSVGElements(objects, options);
var canvas = new fabric.Canvas('canvas');
canvas.add(loadedObject);
canvas.calcOffset();
canvas.renderAll();
console.log (canvas.toDataURL('png'));
});
});
});
我正试图在 fabric.js 中找到相关代码,但我们将不胜感激。
最佳答案
好的,经过一些研究后回答我的问题......
每次将 data-uri 字符串设置为 HTML 图像的源属性时,webkit 总是将 origin-clean 标志设置为 false,这是然后呈现在 Canvas 元素上。 Firefox 和 Chrome(例如)在某些情况下允许这样做,但 webkit 不允许。
Fabric.js 不会遇到此问题,因为它会将形状渲染到 Canvas 中,但不会为此使用数据 uri,因此 Canvas 不会受到污染。
另一个解决方案是使用 canvg和 SVG.toDataURL .
此处引用:
问题解释:http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#security_issues
关于javascript - phantomjs 使用 src 图像在 canvas.toDataURL 上抛出 DOM 异常 18,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26424765/