代码之家  ›  专栏  ›  技术社区  ›  Drew LeSueur

对于SVG,是否有与Canvas的ToDataURL方法等效的方法?

  •  10
  • Drew LeSueur  · 技术社区  · 15 年前

    我正在尝试将SVG图像加载到画布中以进行像素操作 我需要这样的方法 toDataURL getImageData 对于SVG

    在Chrome/Safari上,我可以尝试通过图像和画布

    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 :))
    

    但我有安全错误。 还有别的办法吗?

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

    4 回复  |  直到 11 年前
        1
  •  5
  •   manalang    11 年前

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

    不能使用SVG的原因 图像元素作为源 DrawImage方法很简单,但是 痛苦:当前的画布 规格尚不允许 引用svgimageElement作为源 对于DrawImage,只能处理 HTML图像元素,HTML画布元素 和htmlvideoelement。这个 很有可能是缺货 在 定义“HTML5中的SVG”行为和 可以扩展到允许 svgsvgelement也是。XHTML:IMG 清单3中的元素使用 可视性:隐藏,因为我们不想要它 干扰其可见副本 画布。

        2
  •  7
  •   Hubert OG    12 年前
    var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString);
    
        3
  •  1
  •   vladich    13 年前

    是的,你不能直接这样做,但是你可以使用 canvg 为此,我的意思是,将SVG绘制到画布,并从画布获取数据URL。它不是没有缺陷的,特别是对于复杂的梯度处理,但是我有一些积极的经验。

        4
  •  1
  •   yellowcode    11 年前

    首先下载JS库svg_todataurl.js并将其包含在内

    然后粘贴这个代码

    var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");