<p>html2canvas tidak merender gambar yang terletak di elemen</p>

Hai.
Saya memiliki masalah yang sama persis.

Masalah yang sama di sini.
Saya mencoba memotret tweet, dan gambar terlampir tidak muncul.
Gambar terlampir.

Saya yakin gambar dari situs lain diblokir secara default karena "menodai kanvas HTML5". Berikut adalah opsi yang perlu Anda gunakan saat memanggil penyaji:

atribut: allowTaint
jenis: boolean
default: salah
deskripsi: Apakah akan mengizinkan gambar lintas-asal mencemari kanvas

Ditemukan di sini: https://html2canvas.hertzen.com/documentation.html.

permasalahan yang sama....
dan gambar saya berasal dari asal yang sama

Saya telah menghadapi masalah yang sama, cara terbaik untuk menyelesaikan masalah ini adalah dengan menjalankan proyek di server dan melihat hasilnya.
Dalam kasus saya, sebelumnya saya menjalankan file html secara langsung tanpa server apa pun, tetapi kemudian setelah googling sedikit saya mendapat solusi untuk mencobanya di server.
Saya mencoba proyek saya menggunakan Visual Studio dan itu berjalan dengan sempurna, gambar saya di dalam tag div juga disalin

Masukkan de option allowTaint untuk melihat semua gambar ke dalam tangkapan layar Anda

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Saya memiliki daftar elemen div.
Ketika saya mencoba untuk menangkap setiap div dengan id, maka beberapa bagian setengah div ditangkap, dan beberapa div mengambil gambar kosong.
dapatkah Anda memberi tahu saya apa masalahnya dan bagaimana saya bisa memperbaikinya. @

Masalah yang sama. Terima kasih atas solusinya.

html2canvas tidak mengonversi gambar yang diberikan src dalam format base64. Saya telah mencetak log. Mohon bantuannya

1283ms html2canvas: Kloning dokumen html2canvas.js:1487
3936ms html2canvas: CanvasRenderer yang diinisialisasi dengan ukuran 601 x 965 html2canvas.js:1487
3937ms html2canvas: Memulai NodeParser html2canvas.js:1487
4014ms html2canvas: Node yang diambil, total: 10 html2canvas.js:1487
4015ms html2canvas: Menghitung klip luapan html2canvas.js:1487
4034ms html2canvas: Mulai mengambil gambar html2canvas.js:1487
4044ms html2canvas: Menambahkan gambar #1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: Menambahkan gambar #2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: Selesai mencari gambar html2canvas.js:1487
4052ms html2canvas: Berhasil memuat gambar #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: Berhasil memuat gambar #2
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted:} null, promise: h
html2canvas.js:1487
4059ms html2canvas: Gambar dimuat, mulai menguraikan html2canvas.js:1487
4060ms html2canvas: Membuat konteks susun html2canvas.js:1487
4064ms html2canvas: Menyortir konteks susun html2canvas.js:1487
4066ms html2canvas: Render antrian dibuat dengan 9 item html2canvas.js:1487
4104ms html2canvas: Selesai rendering html2canvas.js:1487
4109ms html2canvas: Memotong kanvas di: kiri: 28 atas: 529 lebar: 545 tinggi: 0 html2canvas.js:1487
4111ms html2canvas: Hasil crop dengan lebar 545 dan tinggi 0 dengan x 28 dan y 529

html2canvsas tidak merender gambar yang diberikan dengan base64 src, panggilan tidak kembali ke "onrendered"
fungsi. Mohon bantuannya

1283ms html2canvas: Kloning dokumen html2canvas.js:1487
3936ms html2canvas: CanvasRenderer yang diinisialisasi dengan ukuran 601 x 965 html2canvas.js:1487
3937ms html2canvas: Memulai NodeParser html2canvas.js:1487
4014ms html2canvas: Node yang diambil, total: 10 html2canvas.js:1487
4015ms html2canvas: Menghitung klip luapan html2canvas.js:1487
4034ms html2canvas: Mulai mengambil gambar html2canvas.js:1487
4044ms html2canvas: Menambahkan gambar #1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: Menambahkan gambar #2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: Selesai mencari gambar html2canvas.js:1487
4052ms html2canvas: Berhasil memuat gambar #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: Berhasil memuat gambar #2
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted:} null, promise: h
html2canvas.js:1487
4059ms html2canvas: Gambar dimuat, mulai menguraikan html2canvas.js:1487
4060ms html2canvas: Membuat konteks susun html2canvas.js:1487
4064ms html2canvas: Menyortir konteks susun html2canvas.js:1487
4066ms html2canvas: Render antrian dibuat dengan 9 item html2canvas.js:1487
4104ms html2canvas: Selesai rendering html2canvas.js:1487
4109ms html2canvas: Memotong kanvas di: kiri: 28 atas: 529 lebar: 545 tinggi: 0 html2canvas.js:1487
4111ms html2canvas: Hasil crop dengan lebar 545 dan tinggi 0 dengan x 28 dan y 529

@SebasAlvarez - opsi allowTaint tidak berfungsi lagi. Apakah itu masih bekerja untuk Anda?

@SebasAlvarez , @sandeepnagra :
saya menggunakan kode ini untuk tangkapan layar gambar di tab baru tetapi gambar tidak dirender dan juga saya lelah dengan "a llowTaint:true " ini hanya berfungsi di dalam jendela yang sama tetapi tidak di tab baru.
ini kode saya:
fungsi render(){
html2canvas(document.body, { allowTaint : benar,
dirender: fungsi (kanvas) {
document.body.appendChild(kanvas);
window.open(canvas.toDataURL());
}
});
}
dapatkah Anda memberi tahu saya apa masalahnya, bagaimana Anda bisa memperbaikinya??

@venkateshduddu - apakah Anda mengalihkan fokus ke tab baru terlebih dahulu sebelum mengambil tangkapan layar?

@sandeepnagra - tidak ada sandeep, saya hanya menggunakan acara klik. satu lagi tangkapan layar berfungsi jika saya menggunakan jalur gambar lokal tetapi jalur server tidak berfungsi di tab baru.

@venkateshduddu - acara klik tidak akan mengalihkan fokus ke tab baru secara otomatis, Anda harus memicunya. Jadi coba itu dulu, saya yakin 100% itu akan menyelesaikan masalah Anda.

Mengenai jalur server, apakah drive jaringan itu diautentikasi? Jika ya, apakah Anda mengautentikasi sebelum mengunggah file ke drive jaringan? Lain ceritanya jika Anda ingin mengunggahnya ke ember S3.

hai ketika saya mencoba menyaring iframe dengan kamera ip internal, itu mengembalikan gambar kosong, bisakah Anda membantu saya?

Jika saya menggunakan allowTaint maka opsi unduh tidak berfungsi. Tolong bantu

permasalahan yang sama....
dan gambar saya berasal dari asal yang sama

Saya baru saja memperbaiki masalah ini.
tolong aktifkan opsi 'useCORS' menjadi 'true'
kode di bawah ini:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Terima kasih banyak @Sotyoyo , Bug saya diperbaiki dengan kode di atas. Terima kasih terima kasih

@Sotyoyo Terima kasih banyak gan, semoga berkah <3

@Sotyoyo Terima kasih banyak, ini berhasil untuk saya :)

Gambar tidak ditampilkan apakah ada masalah dalam kode saya?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
pencatatan: benar,
Rendering surat: 1,
allowTaint: salah,
gunakanCORS: benar,
dirender: fungsi (kanvas) {
var img = kanvas.toDataURL('gambar/png');
var doc = jsPDF baru();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test2.pdf');
}
});

permasalahan yang sama....
dan gambar saya berasal dari asal yang sama

Saya baru saja memperbaiki masalah ini.
tolong aktifkan opsi 'useCORS' menjadi 'true'
kode di bawah ini:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

pekerjaannya! Terima kasih!

permasalahan yang sama....
dan gambar saya berasal dari asal yang sama

Saya baru saja memperbaiki masalah ini.
tolong aktifkan opsi 'useCORS' menjadi 'true'
kode di bawah ini:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

itu benar /

html2canvas(document.querySelector("#id-of-element"),{ logging: true, letterRendering: 1, allowTaint: false, useCORS: true }).then(canvas => {
var imgData = kanvas.toDataURL('gambar/jpeg');
});

Masukkan de option allowTaint untuk melihat semua gambar ke dalam tangkapan layar Anda

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Terima kasih. Ini bekerja dengan baik.

Tapi saya tidak bisa mengkloning gaya gambar ke kanvas

Saya masih menghadapi masalah yang sama bahkan setelah menggunakan opsi di atas di bawah ini adalah kode saya.
var elemen = document.querySelector("#map-image-id");
html2canvas(elemen, {
pencatatan: benar,
Rendering surat: 1,
allowTaint: salah,
gunakanCORS: benar
}).lalu(canvasElm => {
var imageType = "gambar/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(datadata);
console.log("src", src);
console.log("Data gambar", imageData);

Saya masih menghadapi masalah yang sama bahkan setelah menggunakan opsi di atas di bawah ini adalah kode saya.
var elemen = document.querySelector("#map-image-id");
html2canvas(elemen, {
pencatatan: benar,
Rendering surat: 1,
allowTaint: salah,
gunakanCORS: benar
}).lalu(canvasElm => {
var imageType = "gambar/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(datadata);
console.log("src", src);
console.log("Data gambar", imageData);

sama denganmu. Sudahkah Anda menyelesaikannya?

Saya masih menghadapi masalah yang sama bahkan setelah menggunakan opsi di atas di bawah ini adalah kode saya.
var elemen = document.querySelector("#map-image-id");
html2canvas(elemen, {
pencatatan: benar,
Rendering surat: 1,
allowTaint: salah,
gunakanCORS: benar
}).lalu(canvasElm => {
var imageType = "gambar/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(datadata);
console.log("src", src);
console.log("Data gambar", imageData);

masalah yang sama dengan saya, bantuan apa pun

Saya melihat masalah yang sama. Apa yang saya lakukan salah?

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

Di bawah ini juga berfungsi jika Anda ingin memasukkan <img src-"..." /> :

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

Konten saya berisi gambar yang berasal dari Aws.s3(). Komentar yang disebutkan di atas tidak berfungsi untuk kasus saya.

html2canvas(konten, {letterRendering: 1,allowTaint: false,useCORS:true })
.kemudian(kanvas => {
const imgData = kanvas.toDataURL('gambar/png');
console.log(imgData);
const pdf = jsPDF baru();
pdf.addImage(imgData, 'PNG', 10, 10, kanvas.lebar, tinggi kanvas);
pdf.save('unduh.pdf');
});

Kanvas keluaran hanya berisi kotak kosong, bukan gambar. Adakah yang punya solusi untuk kasus saya?

Konten saya berisi gambar yang berasal dari Aws.s3(). Komentar yang disebutkan di atas tidak berfungsi untuk kasus saya.

html2canvas(konten, {letterRendering: 1,allowTaint: false,useCORS:true })
.kemudian(kanvas => {
const imgData = kanvas.toDataURL('gambar/png');
console.log(imgData);
const pdf = jsPDF baru();
pdf.addImage(imgData, 'PNG', 10, 10, kanvas.lebar, tinggi kanvas);
pdf.save('unduh.pdf');
});

Kanvas keluaran hanya berisi kotak kosong, bukan gambar. Adakah yang punya solusi untuk kasus saya?

masalah yang sama di sini. gambar berasal dari ember S3

permasalahan yang sama....
dan gambar saya berasal dari asal yang sama

Saya baru saja memperbaiki masalah ini.
tolong aktifkan opsi 'useCORS' menjadi 'true'
kode di bawah ini:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Terima kasih
Ini bekerja untuk saya ❤❤

Akses ke gambar di ' https://image/logo link' from Origin ' http://localhost :3000' telah diblokir oleh kebijakan CORS: Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta.
Apakah ini alasan mengapa logo saya tidak muncul di file pdf.
Istirahatkan semua teks dengan css diterapkan dan logo merek yang ada di folder statis saya akan datang.
Tolong jawab butuh bantuan ini Saya mencoba ini lebih dari 2 minggu.

Bagi siapa pun yang datang ke sini, setelah mencoba banyak hal, saya menemukan bahwa untuk mendapatkan gambar dari sumber eksternal (seperti ember S3), Anda harus mengaktifkan keduanya useCORS = true untuk html2canvas, dan mengaktifkan kebijakan CORS pada gambar yang disajikan dari S3.

Saya menyelesaikannya menggunakan proxy html2canvas. Anda dapat melihat beberapa detail tentang penggunaan dan pengujian di sini:
https://github.com/zeusstl/html2canvas-proxy-nodejs