Html2canvas: Tag gambar tidak tertangkap

Anda kehilangan pramuat gambar, yang dengan sendirinya tidak sinkron, jadi Anda harus membungkusnya dalam panggilan balik. Anda mungkin juga menggunakan versi yang lebih lama, jadi saya sarankan untuk mendapatkan versi terbaru dari https://github.com/niklasvh/html2canvas/downloads dan kemudian menguji dengan:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Terima kasih atas respon cepatnya, saya mengunduh versi terbaru dan mencoba kode di atas, masih tidak muncul tag gambar di kanvas yang dirender. Apakah saya melewatkan sesuatu, saya menambahkan html2canvas.js, jquery.plugin.html2canvas dan menggunakan jquery 1.7. Bantuan Anda sangat dihargai.

Apakah gambar dihosting di bawah asal yang sama dengan halaman yang Anda render?

Setel logging: true dan periksa apa yang dikatakan konsol tentang gambar, apakah mereka gagal?

Gambar dimuat dengan sempurna, silakan lihat log di bawah ini:

html2canvas: Pramuat dimulai: menemukan gambar latar html2canvas.js:27
html2canvas: mulai: gambar: 1 / 1 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 2 / 2 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 3 / 3 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 4 / 4 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 5 / 5 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 6 / 6 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 7 / 7 (gagal: 0) html2canvas.js:27
html2canvas: Pramuat: Menemukan gambar html2canvas.js:27
html2canvas: Pramuat: Selesai. html2canvas.js:27
html2canvas: mulai: gambar: 8 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 9 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 10 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 11 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 12 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 13 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 14 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 15 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 16 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 17 / 18 (gagal: 0) html2canvas.js:27
html2canvas: mulai: gambar: 18 / 18 (gagal: 0) html2canvas.js:27
Selesai memuat gambar: # 18 (gagal: 0) html2canvas.js:27

Tidak dapat memperoleh data gambar dari kanvas karena kanvas telah dinodai oleh data lintas asal.

html2canvas: Renderer: Perender kanvas selesai - mengembalikan objek kanvas

File javascript dan gambar terletak di direktori yang sama selain komentar sebelumnya.

Hai niklasvh, ini berfungsi sempurna dengan masalah kebijakan aslinya yang sama, saya memutuskan berjalan di websever yang sebelumnya berjalan secara lokal menggunakan file:// ini dilihat sebagai masalah lintas domain. Terima kasih telah membimbing saya ke arah yang benar. Ini pluginnya bagus :)

Niklashvh saya mencoba melakukan ini untuk aplikasi hybrid android, yang berjalan secara lokal menggunakan file:// dapatkah Anda memandu saya menyelesaikan masalah lintas domain ini atau saran apa pun yang sangat dihargai.

Jika Anda tidak perlu mengekspor gambar ke mana pun, Anda selalu dapat mengatur allowTaint: true

Kami mengekspor gambar ke memori dan mengirimkannya sebagai pdf di email

Saya memiliki masalah yang sama, lognya adalah sebagai berikut:

html2canvas: Pramuat dimulai: menemukan html2canvas.js background-images: 21
html2canvas: Pramuat: Menemukan gambar html2canvas.js: 21
html2canvas: Pramuat: Selesai. html2canvas.js 21
html2canvas: mulai: gambar: 1/2 (gagal: 0) html2canvas.js: 21
html2canvas: mulai: gambar: 2/2 (gagal: 0) html2canvas.js: 21
Selesai memuat gambar: #2 (gagal: 0) html2canvas.js: 21
html2canvas: Renderer: Perender kanvas selesai - mengembalikan kanvas obj

gambar terletak di gambar latar, cukup muat div gambar utama, narapidana tidak ditampilkan.

Tidak masalah karena gambar silang berada dalam domain yang sama.

Ada ide?

jika saya menambahkan "background-size: cover;" untuk gaya, gambar tidak muncul ...

ternyata ini masalahnya

dan berhasil!!, hanya saja saya harus memasukkan "background-size: 100% 100%;" alih-alih "ukuran latar belakang: penutup;"

HTML@Canvas tidak menangkap saat menggunakan url online dengan img, apa solusi untuk masalah ini?
Terima kasih

@Elgamal10 menggunakan proxy

https://github.com/brcontainer/html2canvas-php-proxy (proxy html2canvas dengan php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (proxy html2canvas dengan asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (proxy html2canvas dengan asp.net - csharp)

Catatan: Baca file README.md

terima kasih atas balasan Anda, tangkapan layarnya bagus tetapi ada kesalahan seperti:

html2canvas_5 tidak didefinisikan
html2canvas_0 tidak didefinisikan
html2canvas_5 tidak didefinisikan
html2canvas_4 tidak didefinisikan
html2canvas_1 tidak ditentukan
html2canvas_5 tidak didefinisikan

@Elgamal10 membuat masalah di proyek
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

Saya yakin Anda menggunakan C# (ASP.NET), apakah saya benar?

Hai Niklas,

Saya sudah mulai menggunakan api Anda dan itu bagus.. Tapi saya buntu, bisakah Anda membantu..

Saya mencoba mengonversi html ke kanvas menggunakan kode:
jQuery('html').html2canvas({
proxy:" http://localhost/myproject/proxy.jsp ",
penggunaCORS:benar ,
dirender : fungsi(kanvas) {
waspada (kanvas);
var url = kanvas.toDataURL("gambar/png");
window.open(url, '_blank');
},
});

Sekarang saya memiliki file bernama proxy.jsp yang menyimpan semua gambar asal silang di jalur ~/Tomcat/myproject/images/"

Setelah itu saya melihat ini di konsol
Sumber daya ditafsirkan sebagai Skrip tetapi ditransfer dengan image/jpeg jenis MIME: " http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi …QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64". html2canvas.js:2264

Setelah semua ini, fungsi panggilan balik saya tidak dijalankan dan saya tidak dapat membuat kanvas..

Apa yang bisa dilakukan? Bisakah Anda membantu?

Terimakasih banyak

@himakshi89 Anda tidak dapat menggunakan proxy: dan userCORS: bersamaan.

Lebih suka menggunakan proxy.
Catatan: cobalah untuk menangkap tubuh.

dalam kode Anda memiliki koma kiri:

},//this is wrong.

});

html2canvas versi berapa?

Coba ini:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

Jika tidak berhasil coba unduh html2canvas ini https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js dan gunakan kode ini:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
Hai

Saya telah memodifikasi kode saya dan sekarang saya mengirim tanggapan dari proxy.jsp sebagai
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

Tidak ada kesalahan yang ditampilkan di konsol sekarang.
Tapi tidak ada yang terjadi sekarang.. Apa yang seharusnya terjadi atau adakah tempat yang perlu diubah?

Tolong bantu

Tetapi karena konsol tidak dapat menampilkan apa-apa
Anda menggunakan kode sampel kedua saya? itu mengirimkan log ke konsol.

Cobalah untuk memberikan kode Anda cara online untuk menguji.

Seperti yang disarankan saya menghapus useCORS dan mengganti html dengan body

jQuery('body').html2canvas({
proxy:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
masuk: benar ,
dirender : fungsi(kanvas) {
var url = kanvas.toDataURL("gambar/png");
window.open(url, '_blank');
}
});

Saya juga menerima ini adalah konsol saya
html2canvas: Kesalahan memuat : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

Saya telah melampirkan tangkapan layar dari apa yang saya dapatkan

Anda mencoba mengunduh https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

dan kode ini:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

atau tidak?

CATATAN: http://nisquare.dyndns.org:8087/facebook/proxy.jsp rusak!

Saya telah mengunduh versi terbaru

Saya mengganti kode dengan yang berikut:

html2canvas($("body").get(0), {
proxy:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
masuk: benar ,
dirender : fungsi(kanvas) {
var url = kanvas.toDataURL("gambar/png");
window.open(url, '_blank');
}
});

kirimi saya tes tautan

Saya menggunakan ini adalah ekstensi chrome dan ekstensi masih dalam mode pengembangan

"Ekstensi Chrome" dengan JSP ?

jsp digunakan hanya untuk bagian proxy..Menurut Anda apa yang lebih disukai?

Ekstensi Chrome berjalan di "protokol" dan "bingkai" lainnya, proxy.jsp menggunakan protokol HTTP.

Saya percaya chrome-extensions tidak memerlukan proxy. Gunakan seperti:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

BACA: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
Hei terima kasih atas idenya.. kita sekarang menggunakan api yang disediakan oleh chrome itu sendiri. Ini memiliki fungsi chrome capturevisibletab yang memecahkan atau masalah dengan sangat mudah :)

@jgab-net terima kasih banyak. Terlalu lama mencari kesalahan

@ Sumit8 (Y) sama-sama

@gitbala Apakah masalah Anda teratasi? @niklasvh Bisakah masalah ini ditutup? (Saya akan berhenti dengan triase bug jika ini mengganggu .. :)

@usmonster dengan segala cara melanjutkan, menghemat waktu saya untuk melihat setiap masalah yang terbuka :)

Ya diselesaikan :)

Pada Senin, 1 Sep 2014 pukul 4:11, usmonster [email protected] menulis:

@gitbala https://github.com/gitbala Apakah masalah Anda teratasi? @niklasvh
https://github.com/niklasvh Bisakah masalah ini ditutup? (Saya akan berhenti dengan
triase bug ini mengganggu .. :)

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

Saya menggunakan html2canvas - gambar lokal tidak ditampilkan dalam pdf. apa solusi untuk ini?

@niklasvh tolong bantu - gambar logo dalam html tidak ditampilkan dalam pdf

Saya gagal saat mengonversi gambar sebaris. cara menggunakan "proxy": " http://localhost/myproject/proxy.jsp ", saya menggunakan vue, di mana meletakkan jsp ini dan saya tidak tahu cara menggunakan @niklasvh bisakah Anda Tolong?

@qiuyaofan mengalami masalah yang sama apakah Anda mendapatkan solusinya? Saya menggunakannya dengan angular2 dan mendapatkan Gambar dari Server Lain. @gitbala apakah Anda mendapatkan solusinya?

+1 BTW lognya terlihat bagus ( html2canvas: Images loaded, starting parsing ) tapi saya masih tidak melihat gambar di pdf.

Saya menggunakan

allowTaint: benar,
gunakanCORS: benar,
taintTest: salah,

@NikhilRadadiya @qiuyaofan guys, juga telah mencari solusi sisi klien yang adil. Menggunakan vue js dan mendapatkan gambar dari giphy. Jadi inilah yang bekerja dengan baik untuk saya:

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

Jadi tidak ada proxy yang digunakan.

@creepteed Saya memiliki elemen lain yang perlu saya konversi ke kanvas dan kemudian simpan ke pdf, html saya tidak hanya berisi gambar, jika demikian, bagaimana saya bisa menggunakan fungsi di atas yang telah Anda posting?

Hai @niklasvh ,
Saya ingin menangkap halaman web menggunakan htmltocanvas semuanya berfungsi dengan baik tetapi ketika saya mencoba untuk menangkap halaman web maka saya tidak mendapatkan gambar.
Bisakah kamu membantuku?
Ini kode saya:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

Di konsol, saya mendapatkan ini
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Terima kasih.