html i Svg na płótno javascript

Question

<div id="Contents"> 
<div style="float:left;margin-left:10px;"> 
<svg></svg> 
</div> 
<div style="float:left;margin-left:10px;"> 
<svg></svg> 
</div> 
</div> 

To jest mój kod HTML. Chcę przekonwertować ten obraz na płótnie.

html2canvas($("#Contents"), { 
    onrendered: function(canvas) { 
    window.open(canvas.toDataURL()); 

    } 
}); 

Używam wtyczki html2canvas do przekonwertowania obrazu, ale nie pokazuje svg. rozwiązać konwersji SVG tp płótno ale teraz html2canvas nie działa

var $to=$("#MainContents").clone(); 

      $($to).children(".box").each(function() { 
    var svg = ResizeArray[$(this).children(".box-content").children().attr("new-id")-1].svg(); 
      var Thiscanvas = document.createElement("canvas"); 
      Thiscanvas.setAttribute("style", "height:" + 100 + "px;width:" + 100+ "px;"); 

      canvg(Thiscanvas, svg); 

      $(this).append(Thiscanvas); 

     }); 
     html2canvas($($to), { 
     onrendered: function(canvasq) { 
     var w=window.open(canvasq.toDataURL()); 
     w.print(); 
     } 
    }); 

mogę przekształcić SVG do płótnie ale html2canvas nie działać działa.

Answer 1

html2canvas nie pozwala zapisać SVG jest problemem.
https://github.com/niklasvh/html2canvas/issues/95

Jeśli chcesz zapisać SVG Ci podążać inną drogą, jak przekształcić SVG do PNG np

SVG -> płótno -> PNG -> płótno -> PNG

Answer 2

Ponieważ html2canvas nie pobiera elementów svg, przed wywołaniem metody html2canvas należy przekonwertować wszystkie elementy svg na canvas. Możesz użyć biblioteki canvg, aby przekonwertować wszystkie svg na płótno. Można przekazać obiekt jquery (który potrzebuje przekonwertować z SVG do płótnie, może być również elementem dominującym) w następujący sposób:

function svgToCanvas (targetElem) { 
var nodesToRecover = []; 
var nodesToRemove = []; 

var svgElem = targetElem.find('svg'); 

svgElem.each(function(index, node) { 
    var parentNode = node.parentNode; 
    var svg = parentNode.innerHTML; 

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

    canvg(canvas, svg); 

    nodesToRecover.push({ 
     parent: parentNode, 
     child: node 
    }); 
    parentNode.removeChild(node); 

    nodesToRemove.push({ 
     parent: parentNode, 
     child: canvas 
    }); 

    parentNode.appendChild(canvas); 
}); 

html2canvas(targetElem, { 
    onrendered: function(canvas) { 
     var ctx = canvas.getContext('2d'); 
     ctx.webkitImageSmoothingEnabled = false; 
     ctx.mozImageSmoothingEnabled = false; 
     ctx.imageSmoothingEnabled = false; 
    } 
}); 

}

Answer 3

Twoje rozwiązanie działa pięknie. Ponieważ nie używam jQuery w mojej aplikacji, musiałem zmienić kilka linii w svgCanvas, aby uzyskać elementy svg i iterować przez nie. Pozostałe funkcje działały bez żadnych zmian. Moje kodu jest ...

function svgToCanvas (targetElem) { 
     var nodesToRecover = []; 
     var nodesToRemove = []; 

     var svgElems = document.getElementsByTagName("svg"); 

     for (var i=0; i<svgElems.length; i++) { 
      var node = svgElems[i]; 
      var parentNode = node.parentNode; 
      var svg = parentNode.innerHTML; 

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

      canvg(canvas, svg); 

      nodesToRecover.push({ 
       parent: parentNode, 
       child: node 
      }); 
      parentNode.removeChild(node); 

      nodesToRemove.push({ 
       parent: parentNode, 
       child: canvas 
      }); 

      parentNode.appendChild(canvas); 
     } 
} 

Answer 4

Trzeba będzie użyć canvg biblioteki do rysowania tego pliku SVG do tymczasowego płótnie, a następnie usunąć to płótno raz wziąć zrzut ekranu przy użyciu html2canvas.

Oto link do canvg: https://code.google.com/p/canvg/downloads/list

Spróbuj:

//find all svg elements in $container 
//$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc 
var svgElements= $container.find('svg'); 

//replace all svgs with a temp canvas 
svgElements.each(function() { 
    var canvas, xml; 

    canvas = document.createElement("canvas"); 
    canvas.className = "screenShotTempCanvas"; 
    //convert SVG into a XML string 
    xml = (new XMLSerializer()).serializeToString(this); 

    // Removing the name space as IE throws an error 
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); 

    //draw the SVG onto a canvas 
    canvg(canvas, xml); 
    $(canvas).insertAfter(this); 
    //hide the SVG element 
    this.className = "tempHide"; 
    $(this).hide(); 
}); 

//... 
//HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT 
//... 

//After your image is generated revert the temporary changes 
$container.find('.screenShotTempCanvas').remove(); 
$container.find('.tempHide').show().removeClass('tempHide');