是否有与画布的 SVG 的 toDataURL 方法等效的方法? [英] Is there an equivalent of canvas's toDataURL method for SVG?

问题描述

我正在尝试将 svg 图像加载到画布中以进行像素操作我需要一个类似 toDataURL 或 getImageData 的方法来用于 svg

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

在 Chrome/Safari 上，我可以尝试通过图像和画布来完成

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?

这是问题的现场演示http://clstff.appspot.com/gist/462846(可以查看源码)

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

推荐答案

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

不能使用SVG的原因图像元素作为源drawImage 方法很简单，但是痛苦:当前的 Canvas规范(还)不允许引用 SVGImageElement 作为源对于 drawImage 只能应付HTMLImageElement, HTMLCanvasElement和 HTMLVideo 元素.这缺点是希望是在处理过程中定义HTML5 中的 SVG"行为和可以扩展到允许SVGSVGElement 也是如此.xhtml:img清单 3 中的元素用途可见性:隐藏，因为我们不想要它干扰其可见副本画布.

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 的 toDataURL 方法等效的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！