Html2canvas: Tangkap SVG

Dibuat pada 26 Apr 2012  ·  64Komentar  ·  Sumber: niklasvh/html2canvas

Halo,

Apakah dukungan html2canvas menangkap SVG, jika ya, bagaimana melakukannya? Bisakah Anda memberi contoh?

Contoh dalam tes \ gambar tidak menangkap SVG.

Tolong bantu. Terima kasih banyak.

Question

Komentar yang paling membantu

Hai kawan,
Saya menyelesaikan masalah ini (kehilangan svg dengan firefox) dengan mengubah sedikit kode sumber.
Pertama, elemen SVG harus memiliki atribut tinggi dan lebar, terlepas dari piksel atau tidak.
maka Anda harus mengubah kode sumber dari:
self.image.src = " data: image / svg + xml ," + (XMLSerializer baru ()). serializeToString (node);
untuk:
self.image.src = " data: image / svg + xml ," + encodeURIComponent ((XMLSerializer baru ()). serializeToString (node));

kemudian nikmatilah.

Semua 64 komentar

Tidak. Ini bukan kesalahan di perpustakaan, tetapi bug di sebagian besar browser (Firefox stabil terbaru, versi 12, telah memperbaiki masalah ini dan merupakan satu-satunya yang berfungsi seperti yang diharapkan). Masalahnya adalah setiap gambar SVG menodai kanvas, membuatnya tidak dapat dibaca. Secara default, html2canvas mengabaikan konten yang menodai gambar, karena kami ingin agar kanvas tetap dapat dibaca (misalnya jika Anda ingin menggunakan toDataUrl ).

Namun, jika Anda tidak peduli bahwa gambar SVG menodai kanvas, Anda dapat menyetel opsi allowTaint menjadi true dan SVG harus dirender dengan benar untuk browser yang mengizinkan SVG sebaris.

Saya juga ingin menunjukkan, jika rendering SVG akan berfungsi dengan benar lintas browser, pustaka ini akan menjadi hampir usang, karena SVG dapat digunakan untuk merender HTML. Saya sudah berkomitmen untuk beberapa kode yang mempercepat rendering kanvas secara signifikan pada browser tempat rendering SVG bekerja (yaitu FF12), serta memungkinkan dukungan untuk semua properti CSS yang didukung browser. Untuk informasi, lihat https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227

Halo,
Terima kasih banyak atas tanggapan Anda yang cepat.
Saya mencoba sebagai saran Anda: setel allowTaint ke true seperti di bawah ini (modifikasi test.js):

setTimeout (function () {

        $(h2cSelector).html2canvas($.extend({
            flashcanvas: "../external/flashcanvas.min.js",
            logging: true,
            profile: true,
            useCORS: true,
            allowTaint: true
        }, h2cOptions));
    }, 100);

Ini membuat SVG berhasil dalam contoh images.html.

Namun jika SVG lebih rumit, SVG tidak dirender dengan benar di lintas browser. Sebagai contoh: Saya ingin menangkap bagan (http://www.highcharts.com/demo/), di Chrome: ini hanya menangkap sumbu x dan sumbu y dari bagan saat bagan dirender sebagai SVG sebaris, dalam bagan kasus render sebagai img dengan sumber dari file svg extenal, tidak menangkap apapun.
Berlawanan dengan Chrome, di Firefox, ia tidak menangkap apa pun saat bagan dirender sebagai SVG sebaris, tetapi dapat menangkap bagan dengan sukses ketika bagan adalah gambar dari file svg eksternal. Yang terburuk adalah di IE9, tidak ada yang ditangkap.

Apakah Anda punya ide untuk mengatasi masalah ini?

Menggunakan sebagai gambar seharusnya berfungsi untuk FF / Chrome. Apa yang bisa Anda coba adalah apakah rendering kanvas sederhana menggunakan drawImage berfungsi dengan SVG.

1 untuk ini. Saya memiliki kasus penggunaan yang sama dengan babyhero, saya perlu mengambil tangkapan layar grafik SVG highcharts untuk alat pelaporan. Ini mungkin untuk mengambil semua highchart SVG secara individual, tapi itu ditampilkan dalam tampilan dengan informasi lain yang kami ingin memiliki kemampuan "Simpan ke Screenshot" untuk.

@ babyhero184 Saya mengatasi batasan ini di html2canvas dengan menggunakan canvg (http://code.google.com/p/canvg/) untuk mengonversi SVG highcharts ke PNG dengan cepat, menyembunyikan elemen SVG dan menampilkan PNG. Kemudian saya mengambil tangkapan layar dengan cepat dengan html2canvas dan kemudian menyembunyikan PNG dan menunjukkan SVG highchart lagi. Ini adalah proses bundaran (SVG -> kanvas -> PNG -> kanvas -> PNG) tetapi bekerja untuk kebutuhan saya.

@joeyrobert Saya juga menghadapi masalah yang sama dengan highcharts dan html2canvas. Ini akan sangat membantu jika Anda dapat membagikan inti kode Anda.
Terima kasih sebelumnya.

@joeyrobert @ Jagdeep1 opsi lain menggunakan Fabric.js untuk merender SVG di kanvas, lalu mengambil gambarnya.

+1

+1

+1

ada solusi untuk masalah ini?

@majuansari _SVG_ to _Canvas_ dan _Canvas_ to _image_ berfungsi di firefox, tapi di Chrome ada kunci keamanan.

Saya menggunakan jQuery untuk menangkap elemen bagan, dan menemukan Highcharts SVG tidak diurai dengan benar saat melakukannya. Jika ada yang melewati pemilih jQuery dari bagan, itu mungkin tidak berisi SVG.

@mbritton coba http://code.google.com/p/canvg/ (foreignObject tidak berfungsi)

Ya, itulah solusi saya.

Saya memecahkan masalah ini dengan mengganti elemen svg dengan elemen kanvas yang dihasilkan canvg saat menangkap.
Ini kode saya.

// targetElem is a jquery obj
function take (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;

            canvas.toBlob(function(blob) {
                nodesToRemove.forEach(function(pair) {
                    pair.parent.removeChild(pair.child);
                });

                nodesToRecover.forEach(function(pair) {
                    pair.parent.appendChild(pair.child);
                });
                saveAs(blob, 'screenshot_'+ moment().format('YYYYMMDD_HHmmss')+'.png');
            });
        }
    });
}

Hanya catatan singkat:
Saya yakin canvg berfungsi dengan baik, tetapi jika Anda hanya ingin mengonversi SVG ke kanvas, Anda dapat menggunakan teknik sederhana yang dijelaskan di sini yang memuat svg dalam gambar dan kemudian mendapatkan konten gambar sebagai dataURL.

var image = new Image();
var xml = '<svg xmlns=....></svg>';
image.src = 'data:image/svg+xml,' + escape(xml); 
document.getElementById('container').appendChild(image);
image.onload = function() {
    image.onload = function() {};
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    image.src = canvas.toDataURL();
}

@steren : Meskipun ini berfungsi dengan baik di Chrome, apakah ada solusi untuk Firefox, yang menghasilkan NS_ERROR_NOT_AVAILABLE pada baris konteks.drawImage (gambar, 0, 0) - tampaknya bug yang diketahui - atau IE 11 di mana SecurityError muncul di kanvas. toDataURL () meskipun gambar berada di domain yang sama? Belum bisa menjalankannya di browser lain selain Chrome ...

@gifarangw kode Anda berfungsi dengan baik dengan highcharts. Terima kasih atas kode Anda yang luar biasa. : +1: Satu-satunya hal yang saya hapus adalah bagian canvas.toBlob.

@steren terima kasih atas solusi Anda, ini berfungsi dengan baik (diuji pada chrome dan firefox terbaru), dan tidak memerlukan pustaka tambahan yang bagus. Saya membuat beberapa perubahan dan menggabungkan dengan kode dari @gifarangw dan saya memperoleh:

    function take(targetElem) {
        // First render all SVGs to canvases
        var elements = targetElem.find('svg').map(function() {
            var svg = $(this);
            var canvas = $('<canvas></canvas>');
            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title="hide\/show"/g, "");
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');
                context.drawImage(image, 0, 0);
            };
            return {
                svg: svg,
                canvas: canvas
            };
        });
        targetElem.imagesLoaded(function() {
            // At this point the container has no SVG, it only has HTML and Canvases.
            html2canvas(targetElem[0], {
                onrendered: function(canvas) {
                    // Put the SVGs back in place
                    elements.each(function() {
                        this.canvas.replaceWith(this.svg);
                    });

                    // Do something with the canvas, for example put it at the bottom
                 $(canvas).appendTo('body');
                }
            })
        })
    }

(menggunakan https://github.com/desandro/imagesloaded)

Halo semua, hanya untuk mengatakan bahwa solusi @Remiremi bekerja sangat baik untuk saya! Saya memiliki halaman dengan banyak grafik yang dibuat dengan HighStocks di svg dan solusi ini bekerja dengan baik! Kerja bagus guys!

@Remiremi @fbotti , Untuk beberapa alasan saya tidak masuk ke img.onLoad dengan demikian, grafik menghilang (tidak diganti dengan kanvas)

Saya sedang bekerja dengan amcharts. Ada ide?

@guypaskar svg Anda mungkin perlu dikurasi lebih lanjut. Anda dapat menambahkan $(image).appendTo('body'); ke kode sebelum mengatur image.onload , kemudian di Firefox Anda akan melihat ikon untuk gambar yang tidak valid, Anda dapat mengklik kanan> melihat gambar dan melihat kesalahan.

Saya mencoba cepat untuk amcharts svg dan saya harus menambahkan properti xmlns="http://www.w3.org/2000/svg" width="1400" height="500" ke tag svg untuk membuatnya bekerja. (Tinggi dan lebar ditentukan sebagai properti css, tetapi untuk beberapa alasan itu tidak diambil.)

Saya telah menemukan perbaikan sederhana.

Pastikan gambar svg Anda memiliki lebar dan tinggi.

Argumen tidak cukup jika tidak karena svg tidak dapat diukur seperti kaleng gambar.

Bisakah seseorang dalam masalah ini merangkum? Apakah masalah asli sudah teratasi? Tampaknya masalah browser tertentu yang mungkin menyebabkan sebagian besar masalah yang disebutkan di sini telah diperbaiki sejak tahun 2012. Menurut beberapa komentar di sini, penggunaan pustaka lain seperti canvg juga tidak lagi diperlukan?

Untuk masalah lainnya, apakah mereka akan dicakup oleh # 197 dan / atau # 267? Bisakah yang ini ditutup?

Ini masih menjadi masalah setidaknya dengan beberapa browser

0,5 menambahkan dukungan untuk SVG

Adakah pratinjau kapan 0,5 akan keluar

@IvoPereira Anda dapat mengikuti status 0,5 di # 421

@niklasvh Saya memiliki Versi 0.5 dan SVG masih tidak merender. Apakah ada contoh bagaimana melakukannya? (Ini adalah SVG inline)

@nikolang apakah Anda menyertakan html2canvas.js dan html2canvas.svg.js ? Jika ya, dapatkah Anda menyediakan jsFiddle atau jsbin untuk mendemonstrasikan masalah spesifik Anda?

Saya mendapatkan ini bekerja. Masalahnya adalah SVG tidak sepenuhnya ditampilkan ketika saya membuat html2canvas.

Namun sepertinya masih ada beberapa masalah dengan rendering. Misalnya http://d3pie.org

Seperti inilah seharusnya:

screen

Seperti inilah tampilannya setelah html2canvas:

canvas

Wah, itu sangat menyeramkan. Supaya lebih mudah dilacak, dapatkah Anda membuka masalah terpisah dengan tangkapan layar yang sama dan tautan ke hanya jsFiddle dengan demo? Ini terlalu jauh dari masalah aslinya, yang sudah lama ditutup. Terima kasih telah melaporkannya!

Saya ingin melakukannya, tetapi saya tidak tahu cara menyertakan html2canvas baru ke jsfiddle. Apakah ada Tautan eksternal yang dapat saya gunakan?

Terima kasih. Dan Versi SVG?

Hai,

SVG ditampilkan di sisi saya, tetapi tampak hitam, seperti yang dilaporkan oleh seseorang di bawah ini. Apakah ada cara untuk menghitung properti "isi" dari elemen svg?

@brainra , saya menggunakan sesuatu seperti ini untuk membuat isian menjadi putih:

// Create dummy canvas to get a white background
var destinationCanvas = document.createElement("canvas");
destinationCanvas.width = canvas.width;
destinationCanvas.height = canvas.height;

var destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,canvas.width,canvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(canvas, 0, 0);

var img = destinationCanvas.toDataURL("image/png");

Gagal menjalankan 'drawImage' di 'CanvasRenderingContext2D': HTMLImageElement yang disediakan dalam status 'rusak'. "

Saya mendapatkan kesalahan ini ketika ada elemen svg di HTML.
Saya juga telah menyetel allowTaint menjadi true. Bisakah seseorang membantu saya?

Saya pikir ini harus dibuka kembali - elemen svg ditampilkan dengan benar di setiap browser kecuali Firefox.

NS_ERROR_NOT_AVAILABLE: ini adalah bug Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=700533 (AFAICT) ada halaman percobaan yang menyoroti masalah (ditautkan dari bug) http://phrogz.net/ SVG / svg_to_png.xhtml

Solusi / perbaikan akan sangat dihargai. Atau mungkin seseorang bisa mencolek seseorang

Saya mencoba ini menggunakan sudut tetapi berakhir dengan kanvas yang tercemar. Saya kira saya membutuhkan SVG mentah?

<img svg-2-canvas-src="/assets/your.svg"/>

angular.module('APP')
    .directive('svg2CanvasSrc', function() {
        return {
            restrict: 'A',
            scope: false,
            link: function($scope, $element, $attrs) {

                var svgSrc = $attrs['svg2CanvasSrc'];

                var image = new Image();

                image.onload = function() {
                    image.onload = function() {};
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0);
                    $element[0].src = canvas.toDataURL();
                };

                image.src = svgSrc;
            }
        };
    });

@remiremi saya menggunakan kode Anda tetapi hasilnya sama, svg hilang ..
asli - https://s29.postimg.org/5lkprhx93/with_SVG.png
hasil - https://s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ... apa nama plugin yang saya lampirkan ketika um menggunakan script ini

Pada dasarnya, menyetel lebar / tinggi eksplisit pada SVG sebelum memanggil html2canvas memperbaiki sebagian besar kasus bagi saya ..
Apa yang saya lakukan adalah melakukan loop melalui berbagai elemen SVG yang diminati, mendapatkan browser mereka menghitung lebar / tinggi menggunakan .getBoundingClientRect () dan mengatur properti lebar tinggi pada elemen, saya perhatikan ketika SVG memiliki persentase dan set lebar / tinggi yang sama, itu tidak tidak merender, tetapi dengan piksel, Booyah

Masih mengalami masalah rendering rentang multi-baris dan div

Hai kawan,
Saya menyelesaikan masalah ini (kehilangan svg dengan firefox) dengan mengubah sedikit kode sumber.
Pertama, elemen SVG harus memiliki atribut tinggi dan lebar, terlepas dari piksel atau tidak.
maka Anda harus mengubah kode sumber dari:
self.image.src = " data: image / svg + xml ," + (XMLSerializer baru ()). serializeToString (node);
untuk:
self.image.src = " data: image / svg + xml ," + encodeURIComponent ((XMLSerializer baru ()). serializeToString (node));

kemudian nikmatilah.

Apakah ada yang tahu bagaimana saya akan memanggil html2canvas pada elemen SVG di DOM?

Sebuah contoh akan sangat bagus!

+1 masih menjadi masalah untuk menangkap tangkapan layar elemen SVG di firefox.

{
  profile: true,
  allowTaint: false,
  onrendered: function() {
    //...done()
  }
}

Hai, saya dapat menyelesaikan masalah ini menggunakan solusi ini (tanpa jQuery):
Larutan

biarkan targetElem =document.getElementById ('body');
biarkan nodeToRecover = [];
biarkan nodeToRemove = [];

    let svgElem = targetElem.querySelector('svg')

    let parentNode = svgElem.parentNode;
        // let svg = parentNode.innerHTML;
        let svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svg-annotations\" style=\"opacity: 1;\" _ngcontent-c7=\"\">\n\t\t\t<defs><marker id=\"arrow-start\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 9.9 0 L 9.9 9 L 0 4.5 Z\" /></marker><marker id=\"arrow-end\" refX=\"9.9\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 0 0 L 0 9 L 9.9 4.5 Z\" /></marker></defs><g class=\"annotation-group\" id=\"measurement-36122\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(758.541 408.978)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g><g class=\"annotation-group\" id=\"measurement-59622\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(889.656 387.507)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g></svg>";

        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas');

        canvg(this.canvas, svg, {renderCallback: function(){
            console.log(this);
        }});

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

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

        parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        console.log(data);

Saya melakukan ini, tapi saya, hanya mendapatkan gambar kosong di IE11. Tapi, saya bisa melihat kanvas di halaman web. Adakah yang bisa membantu saya apa yang saya lakukan salah di sini?

Halo. Saya mengalami masalah saat merender svg saat ini memiliki <image> tag.
barchart (24)

Contoh svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

Contoh di jsfiddle http://jsfiddle.net/maestro888/fmjywksq/

Saya telah menemukan perbaikan sederhana.

Pastikan gambar svg Anda memiliki lebar dan tinggi.

Argumen tidak cukup jika tidak karena svg tidak dapat diukur seperti kaleng gambar.

Ini benar tetapi tidak untuk IE11, sayangnya ...

Senang anda menyelesaikannya.
Cukup periksa JS Fiddle Anda dan itu akan menampilkan gambar.

Salam,

Bernard TA Baker

Pada Rabu, 27 Maret 2019 pukul 16.34 Alessandro Candini [email protected]
menulis:

Saya telah menemukan perbaikan sederhana.

Pastikan gambar svg Anda memiliki lebar dan tinggi.

Argumen tidak cukup jika tidak karena svg tidak dapat diukur
seperti kaleng gambar.

Ini benar tetapi tidak untuk IE11, sayangnya ...

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
.

Saya telah menemukan solusi dengan canvg , dilaporkan di sini pada stack overflow : ini bekerja dengan sempurna di IE11!

Cuplikan saya yang diuraikan ulang, menghapus ketergantungan jQuery:

let svgIcons = document.querySelectorAll('.svg-icon');

for (let i = 0; i < svgIcons.length; ++i) {
  let curSvg = svgIcons[i];
  let canvas;
  let xml;

  // Size and color needed for every browser
  curSvg.setAttribute('width', curSvg.parentNode.offsetWidth);
  curSvg.setAttribute('height', curSvg.parentNode.offsetHeight);
  curSvg.setAttribute('style', 'fill: blue');

  canvas = document.createElement('canvas');
  canvas.className = 'screenShotTempCanvas';
  xml = new XMLSerializer().serializeToString(curSvg);
  canvg(canvas, xml);
  curSvg.parentNode.insertBefore(canvas, curSvg.nextSibling);
  curSvg.style.display = 'none';
 }

Bagus

Pada Kamis, 28 Mar 2019, 08:49 Alessandro Candini, [email protected]
menulis:

Saya telah menemukan solusi dengan canvg https://github.com/canvg/canvg ,
dilaporkan di sini di stack overflow
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir :
ini bekerja dengan sempurna di IE11!

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
.

Hai @niklasvh Senang melihat pustaka javascript html2canvas Anda, Ini pustaka yang mengagumkan, Tapi Masih Menghadapi masalah yang sama untuk merender svg ke dalam pembuatan kanvas menggunakan versi npm "1.0.0-alpha.12
"serta versi" 1.0.0-rc.1 "juga di aplikasi anguar6 kami, Sesuai tanggapan Anda dari daftar masalah, Masalah akan datang svg tidak mengandung tinggi dan lebar, Tapi dalam kasus saya Svg saya punya 100% tinggi dan lebar dan div bersarang berisi tag svg juga dan bersarang kanvas yang ada juga, saya dapat mengekspor halaman saya sebagai gambar png tetapi gambar itu hanya berisi ikon svg yang rusak dan kanvas yang ada juga tidak rendering. Dan satu hal lagi setelah ekspor selesai halaman saya yang lain svg semua ditampilkan sebagai gambar rusak. untuk referensi Anda, saya melampirkan tangkapan layar saya di sini, silakan lihat sekali dan beri tahu saya terima kasih.
html2canvas (this.screen.nativeElement, {useCORS: true}). lalu (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.download = 'screenshot.png';
this.downloadLink.nativeElement.click ();
});

html2canvas_orginal_Before export
html2canvas_orginal_after export
html2canvas_exported image

testpdf (1) .pdf
Hai,
Saya mendapatkan sumbu tetapi area grafik lainnya berwarna hitam. Ada saran

Hai @niklasvh Senang melihat pustaka javascript html2canvas Anda, Ini pustaka yang mengagumkan, Tapi Masih Menghadapi masalah yang sama untuk merender svg ke dalam pembuatan kanvas menggunakan versi npm "1.0.0-alpha.12
"serta versi" 1.0.0-rc.1 "juga di aplikasi anguar6 kami, Sesuai tanggapan Anda dari daftar masalah, Masalah akan datang svg tidak mengandung tinggi dan lebar, Tapi dalam kasus saya Svg saya punya 100% tinggi dan lebar dan div bersarang berisi tag svg juga dan bersarang kanvas yang ada juga, saya dapat mengekspor halaman saya sebagai gambar png tetapi gambar itu hanya berisi ikon svg yang rusak dan kanvas yang ada juga tidak rendering. Dan satu hal lagi setelah ekspor selesai halaman saya yang lain svg semua ditampilkan sebagai gambar rusak. untuk referensi Anda, saya melampirkan tangkapan layar saya di sini, silakan lihat sekali dan beri tahu saya terima kasih.
html2canvas (this.screen.nativeElement, {useCORS: true}). lalu (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.download = 'screenshot.png';
this.downloadLink.nativeElement.click ();
});

html2canvas_orginal_Before export
html2canvas_orginal_after export
html2canvas_exported image

masalah yang sama, Kesalahan menemukan svg di dokumen kloning

Sebelum menggunakan html2canvas saya untuk sementara menyetel tinggi dan lebar ke SVG. Dengan cara ini saya bisa menangkap svg.

var selectedItem = document.querySelector (". chartWrapper");
var svgElements = selectedItem.querySelectorAll ('svg');
untuk (let i = 0; i <svgElements.length; i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). height;
selectedItem.getElementsByTagName ("svg") [i] .style.width = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). width;
}
html2canvas (selectedItem, {backgroundColor: '# 000', allowTaint: true}). lalu (canvas => {
var myImage = canvas.toDataURL ("image / png"). replace ("image / png", "image / octet-stream");
window.location.href = myImage;
})
untuk (let i = 0; i <svgCount; i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = '100%';
selectedItem.getElementsByTagName ("svg") [i] .style.width = '100%';
}

// use html2canvas in react project when i need a screenshot for the svg
/**
 * svg to canvas
 * <strong i="5">@param</strong> targetElem
 * <strong i="6">@return</strong> {Promise<[]>} // return svg elements
 */
async function svgToCanvas(targetElem) {
  let nodesToRecover = [], nodesToRemove = [], svgElems = targetElem.querySelectorAll('svg');

  for (let i = 0; i < svgElems.length; i++) {
    let node = svgElems[i], parentNode = node.parentNode, svg = parentNode.innerHTML,
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
    canvas.setAttribute('data-cover', 'svg');
    const v = await Canvg.from(ctx, svg);
    v.start();
    // record svg elements
    nodesToRecover.push({
      parent: parentNode,
      child: node
    });
    parentNode.removeChild(node);
    //  record canvas elements
    nodesToRemove.push({
      parent: parentNode,
      child: canvas
    });

    parentNode.appendChild(canvas);
  }
  return nodesToRecover;
}

/**
 * recover canvas to svg
 * <strong i="7">@param</strong> targetElem
 * <strong i="8">@param</strong> svgElems // need to recover svg elements
 * <strong i="9">@return</strong> *
 */
function recoverCanvasToSvg(targetElem, svgElems) {
  let canvasElems = targetElem.querySelectorAll("canvas[data-cover='svg']");
  if(!targetElem){
    throw new Error('must have targetElem param')
  }
  if(!isArray(svgElems) && svgElems.length !== canvasElems.length) {
    throw new Error('svgElems must be an Array, and it`s length equal to canvasElems`s length')
  }
  for(let i = 0; i < canvasElems.length; i++){
    let node = canvasElems[i], parentNode = node.parentNode;
    parentNode.removeChild(node);
    parentNode.appendChild(svgElems[i]?.child);
  }
}
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

koreanman picture koreanman  ·  4Komentar

tibewww picture tibewww  ·  4Komentar

arzyu picture arzyu  ·  3Komentar

AlphaDu picture AlphaDu  ·  4Komentar

kunal886496 picture kunal886496  ·  3Komentar