एचटीएमएल और एसवीजी कैनवास जावास्क्रिप्ट

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> 

यह मेरा एचटीएमएल कोड है। मैं इसे कैनवास छवि को कन्वर्ट करना चाहता हूं।

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

    } 
}); 

मैं इसे छवि में बदलने के लिए html2canvas प्लगइन का उपयोग करता हूं लेकिन यह svg नहीं दिखाता है। मैं svg tp कैनवास परिवर्तित हल, लेकिन अब काम नहीं कर रहा html2canvas

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(); 
     } 
    }); 

मैं कैनवास को svg में बदल सकते हैं, लेकिन html2canvas काम नहीं कर कार्य करते हैं।

Answer 1

html2canvas एसवीजी को बचाने की अनुमति नहीं देता है एक मुद्दा है।
https://github.com/niklasvh/html2canvas/issues/95

आप एक एसवीजी आप एक अन्य तरीके से पालन को बचाने के लिए चाहते हैं,

एसवीजी उदाहरण के लिए एक PNG में अपने एसवीजी को बदलने के लिए चाहते -> कैनवास -> पीएनजी -> कैनवास -> पीएनजी

Answer 2

html2canvas svg तत्वों को नहीं लेते हैं, इसलिए आप html2canvas विधि को कॉल करने से पहले सभी svg तत्वों को कैनवास में कनवर्ट करने की आवश्यकता होती है। आप सभी svg को कैनवास में कनवर्ट करने के लिए canvg लाइब्रेरी का उपयोग कर सकते हैं। आप jQuery वस्तु पारित कर सकते हैं निम्न विधि के लिए (की जरूरत है जो svg से कैनवास में बदलने के लिए, यह भी एक माता पिता के तत्व हो सकता है):

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

आपका समाधान खूबसूरती से काम करता है। चूंकि मैं अपने आवेदन में jQuery का उपयोग नहीं कर रहा हूं, इसलिए मुझे एसवीजी तत्वों को प्राप्त करने और उनके माध्यम से पुनरावृत्ति के लिए svgCanvas में कुछ पंक्तियों को बदलना पड़ा। बाकी कार्यों में बिना किसी बदलाव के काम किया। मेरे कोड ... है

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

कि आपको अस्थायी कैनवास को यह svg बैठक के लिए canvg लाइब्रेरी का उपयोग करें और फिर उस कैनवास दूर करने के लिए एक बार आप स्क्रीनशॉट html2canvas का उपयोग कर लेने की आवश्यकता होगी।

यहाँ canvg के लिए लिंक है:

//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');