相关疑难解决方法(0)

我想通过JavaScript将SVG转换为位图图像(如JPEG,PNG等).

是否有将SVG文件绘制到HTML5画布上的默认方式？谷歌浏览器支持将SVG加载为图像(并简单地使用drawImage),但开发人员控制台确实警告过resource interpreted as image but transferred with MIME type image/svg+xml.

我知道有可能将SVG转换为canvas命令(比如这个问题),但我希望不需要.我不关心旧的浏览器(所以如果FireFox 4和IE 9支持某些东西,那就足够了).

是否可以为任何非Flash Google图表可视化设置font-family？特别适用于图表轴上的文字.谷歌图表功能强大,但很难看.不幸的是,我无法转向更好的事情,比如gRaphael.

我试图加载到画布像素处理我需要一种方法像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(你可以查看源代码)

根据Mozilla的文档,您可以像这样在Canvas上绘制复杂的HTML .

我无法弄清楚的是让谷歌字体与它一起工作的方法.

请参阅以下示例:

var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');
    
    var data   = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
                   '<foreignObject width="100%" height="100%">' +
                     '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px;font-family:Pangolin">' +
                       'test' +
                     '</div>' +
                   '</foreignObject>' +
                 '</svg>';
    
    var DOMURL = window.URL || window.webkitURL || window;
    
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svg);
    
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }
    
    img.src = url;

<link href="https://fonts.googleapis.com/css?family=Pangolin" rel="stylesheet">

<div style="font-size:40px;font-family:Pangolin">test</div><hr>
<canvas …

我已经创建了一个简单的SVG元素,当点击一个按钮时可以下载到png,我的解决方案类似于此处

基本思想是:
1.svg to canvas
2.canvas to dataUrl
3.trigger从dataUrl下载

问题是,当下载png文件时,它不包括应用于svg my solution结果的css样式

注意-我知道有一个workingaround解决方案通过在移动元素的样式"内联"像这里或通过下挖DOM树,并使用递归解决方案的getComputedStyle(元素,NULL);

问题:
1.这个问题的真正原因和解决方案是什么.
(无论如何,GPU加速度是相关的吗？)
2.在使用Fontface的自定义字体时,我仍然可以解决这个问题

 <button id="btn">svg to png</button>

  <svg id="svg" width="200" height="200">
    <circle cx="50" cy="50" r="30" />
    <text class="svgTxt" x="0" y="100">Hen's SVG Image</text>
  </svg>
  <canvas id="canvas"  width="200" height="200"></canvas>

我的CSS:

  /*adding exo2 font*/
    @font-face {
    font-family: 'exo_2black';
    src: url('./exo2font/Exo2-Black-webfont.eot');
    src: url('./exo2font/Exo2-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('./exo2font/Exo2-Black-webfont.woff') format('woff'),
         url('./exo2font/Exo2-Black-webfont.ttf') format('truetype'),
         url('./exo2font/Exo2-Black-webfont.svg#exo_2black') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*change circle color depends on window size*/
@media screen …

我试图实现的总体任务是加载一个 SVG 图像文件，在某处修改颜色或文本，然后将其绘制到 HTML5 画布上（大概使用 drawImage()，但任何合理的替代方法都可以）。

我遵循了关于如何在 Javascript 中加载和修改 SVG 文件的另一个 StackOverflow 问题的建议，如下所示：

<object class="svgClass" type="image/svg+xml" data="image.svg"></object>

在 Javascript 中紧随其后的是

document.querySelector("object.svgClass").
    getSVGDocument().getElementById("svgInternalID").setAttribute("fill", "red")

这有效。我现在在我的网页中显示了修改后的 SVG。

但我不想只显示它 - 我想将它绘制为 HTML5 画布更新的一部分，如下所示：

ctx.drawImage(myModifiedSVG, img_x, img_y);

如果我尝试存储 getSVGDocument() 的结果并将其作为 myModifiedSVG 传递，我只会收到一条错误消息。

如何为修改后的 SVG 进行 HTML5 画布绘制调用？

编辑：我可以通过这样做在 HTML5 画布上绘制 SVG 图像：

var theSVGImage = new Image();
theSVGImage.src = "image.svg";
ctx.drawImage(theSVGImage, img_x, img_y);

这很好，但我不知道如何以这种方式修改我加载的 SVG 图像中的文本/颜色！如果有人可以告诉我如何进行修改，那么这也是一个解决方案。我不依赖于通过对象 HTML 标记。

我正在编写一个小片段，允许用户将图像拖动到 div 容器（dropzone）中，然后在该 div 中创建一个画布并将图像绘制到 div 中。但是，这现在确实有效，我根本无法弄清楚。问题是图像由于某种原因被剪裁了。我可以确认图像已正确加载，因为如果我附加图像对象而不是画布，它可以工作！显示整个图像。我也试过在drawImage参数中明确输入宽度和高度，但没有成功。

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  if(files)
    readFile(files[0]);
}

function applyDataUrlToCanvas(dataUrl) {

  var canvas = document.getElementById('mainCanvas'),
  ctx = canvas.getContext("2d");

  var img = new Image();
  img.src = dataUrl;

  img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height);
  };
}

//-----------------------------------------------------------------------------

function readFile(file) {

  var dropzone = document.getElementById('dropzone');

  for (var i = dropzone.childNodes.length - 1; i >= 0; i--) {
    dropzone.removeChild(dropzone.childNodes[i]);
  }

  var canvas = document.createElement('canvas'); …