对于SVG有相当于canvas的toDataURL方法吗？ [英] Is there an equivalent of canvas's toDataURL method for SVG?

问题描述

我想加载一个svg图像到画布的像素操作
我需要一个方法像 toDataURL 或 getImageData

$ b $ p> var img = new Image（）
img.onload = function（）{
ctx.drawImage（img，0,0）//正确绘制svg图片到画布！但是...
var dataURL = canvas.toDataURL（）; // SECURITY_ERR：DOM异常18
var data = ctx.getImageData（0,0，img.width，img.height）.data // also SECURITY_ERR：DOM异常18
}
img .src =image.svg//这是一个svg文件。 （与html文件相同的域:)）


但我得到安全错误。
任何其他方式？

这里是问题的现场演示 http://clstff.appspot.com/gist/462846 （您可以查看源代码）

解决方案

发件人： http://www.svgopen.org/ 2009 / papers / 12-Using_Canvas_in_SVG /＃d4e105

无法使用SVG的原因
image元素作为
源代码drawImage方法很简单，但是
痛苦：当前Canvas
规范不允许
引用SVGImageElement为源
为drawImage，只能处理
HTMLImageElement，HTMLCanvasElement
和HTMLVideoelement。在定义SVG in HTML5行为的
过程中，
short-coming将被定义为
，
可以扩展为允许
SVGSVGElement。列表3中的xhtml：img
元素使用
visibility：hidden，因为我们不希望它
干扰其在
上的可见副本Canvas。

I am trying to load an svg image into canvas for pixel manipulation I need a method like toDataURL or getImageData for svg

on Chrome/Safari I can try doing it through and image and canvas

var img = new Image()
img.onload = function(){
  ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however...
  var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18
  var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18
  }
  img.src = "image.svg" //that is an svg file. (same domain as html file :))

But I get security errors. Any other way?

Here is a live demo of the problem http://clstff.appspot.com/gist/462846 (you can view source)

解决方案

From: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

The reason why you cannot use an SVG image element as source for the drawImage method is simple, but painful: the current Canvas specification does not (yet) allow to reference SVGImageElement as source for drawImage and can only cope with HTMLImageElement, HTMLCanvasElement and HTMLVideoelement. This short-coming will hopefully be addressed during the process of defining "SVG in HTML5" behavior and could be extended to allow SVGSVGElement as well. The xhtml:img element in listing 3 uses visibility:hidden as we do not want it to interfere with its visible copy on the Canvas.

这篇关于对于SVG有相当于canvas的toDataURL方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！