html içeriğini görüntüye dönüştürmek için http://html2canvas.hertzen.com/documentation.html numaralı makalede anlatılan html2canvas kullanmak istiyorum. Ancak HighCharts'ın görüntüsünü düzgün bir şekilde alamıyorum. IE10'da boş resim oluşturur ve Chrome'da bunun bir parçasını oluşturur. Bu amaçla html2canvas kullanmak mümkün mü?HighCharts ile html2Canvas kullanma
cevap
Highcharts grafik çizmek için svg kullanır. Bu svg'yi geçici bir tuvale çizebilmek için canvg kütüphanesini kullanmanız ve sonra html2canvas'ı kullanarak ekran görüntüsünü aldıktan sonra bu tuvali kaldırmanız gerekecektir. Bunu deneyin https://code.google.com/p/canvg/downloads/list
:
//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');
Bu benimle tam olarak çalışmadı, boş bir tuvali geri çekti –
@NaguibIhab Orada neyin yanlış gittiğinden emin değil. Ekran görüntüsünü almadan önce $ konteynerin DOM'a eklenip eklenmediğini kontrol edebilir misiniz? Sorun bu olabilir. – shinobi
- 1. Textarea ekran görüntülerini kullanma Html2Canvas
- 2. html2canvas ile Arapça Kodlama
- 3. Lambda İfadesiyle HighCharts Kullanma
- 4. Highcharts, wicked_pdf ile çalışmaz
- 5. Highcharts -
- 6. Highcharts
- 7. Highcharts: setData ile Pasta Grafiği()
- 8. highcharts 4 çeyrek ile dağılır
- 9. Highcharts - angularjs
- 10. JS Highcharts
- 11. Highcharts, javascript
- 12. Highcharts Gauge
- 13. html2canvas tarayıcıda açmadan bir jpeg olarak kaydetme
- 14. Highcharts: "Tümünü yazdır" düğmesi
- 15. Highcharts yaxis etiketleri Format
- 16. Highcharts veri etiketi kesiliyor
- 17. Highcharts serisi grup
- 18. Sıfırlama Highcharts devlet
- 19. Highcharts - Vurgu/Gölge aralığı
- 20. Highcharts ekseni etiketi
- 21. Ben Highcharts lib ile yapılan bütün grafik üzerinde click olayı üzerinde ekleyebilir merak ediyorum Highcharts kütüphanesine
- 22. Highcharts angularjs Özel araç
- 23. Highcharts ısı haritası - Bir Highcharts ısı haritası kullanıyorum
- 24. highcharts tooltip z-endeksi
- 25. Highcharts: Sıcaklık haritası
- 26. Highcharts Performans Geliştirme Yöntemi?
- 27. Highcharts kategorileri aylar eklenmiyor
- 28. highcharts drilldown çalışmıyor
- 29. Highcharts etiketleri kesildi
- 30. Highcharts - Efsane Konumlandırma grafik
Highcharts şemasının çıkarılması için svg kullanır İşte
canvg için bağlantıdır. Bu svg'yi geçici bir tuvale çekmek için canvg kitaplığını kullanmanız ve sonra html2canvas'ı kullanarak ekran görüntüsünü aldığınızda bu tuvali kaldırmanız gerekecektir. – shinobi