Html2canvas: Gambar Lintas Domain tidak dirender (Tidak ada CORS atau proxy)

Mungkin Anda harus menggunakan useCORS ptoperty sebagai true, ini ditujukan untuk konten web lintas domain

Menggunakan useCORS gagal mengambil gambar. Masalah yang saya alami aneh karena tidak gagal mendapatkan gambar dari domain eksternal, hanya saja tidak membuatnya dalam tangkapan.

Apakah Anda mencoba perbaikan saya? https://github.com/niklasvh/html2canvas/pull/554

Mungkin harus menyetel allowTaint menjadi true, tetapi Anda tidak dapat mengekspor hasil yang dirender.

Saya tidak mengerti mengapa tidak menggunakan userCORS atau proxy ... Mereka hanya dibuat untuk masalah seperti itu.

@brcontainer Karena tidak berfungsi di versi terbaru, lihat perbaikan saya: https://github.com/niklasvh/html2canvas/pull/554

@Cristy94 Tentu!! Perbaikan yang bagus! Terima kasih!

Hai @Cristy94 ,

Saya mengambil gambar dari CMS (Contentful) di HTML saya dan kemudian mencoba membuat PDF dari HTML itu.
Tetapi dalam PDF yang dihasilkan, gambar hilang. (tampaknya menjadi masalah asal silang).
Tolong sarankan saya bagaimana saya bisa menyingkirkan masalah ini.
Di bawah ini adalah kode saya-:

fungsi unduhPDF() {
var canvasToImage = function(kanvas){
var img = Gambar baru();
var dataURL = canvas.toDataURL('gambar/png');
img.crossOrigin = "Anonim";
img.src = dataURL;
kembalikan img;
};

var canvasShiftImage = function(kanvas lama,shiftAmt){
shiftAmt = parseInt(shiftAmt) || 0;
if(!shiftAmt){ mengembalikan kanvas lama; }

var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
ctx.mozImageSmoothingEnabled = salah;
ctx.webkitImageSmoothingEnabled = salah;
ctx.msImageSmoothingEnabled = salah;
ctx.imageSmoothingEnabled = salah;

var img = canvasToImage(canvas lama);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

kembalikan kanvas baru;
};

var canvasToImageSuccess = function(kanvas){
var pdf = jsPDF baru('l','px'),
pdfInternal = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
totalPdfTinggi = 0,
htmlPageHeight = kanvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
jaring pengaman = 0;

while(totalPdfHeight < htmlPageHeight && safetyNet < 15){
var newCanvas = canvasShiftImage(kanvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
// var alias = Math.random().toString(35);
// pdf.addImage(newCanvas, 0, 0, pdfPageWidth, 0, 'png', alias, 'NONE');

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(totalPdfHeight < htmlPageHeight){
pdf.addHalaman();
}
safetyNet++;
}

var pageName = document.location.pathname.match(/[^/]+$/)[0];
pdf.save(namahalaman + '.pdf');
};

html2canvas($('body')[0],
{
dirender: fungsi (kanvas){
canvasToImageSuccess(kanvas);
}
});
}

Hei, apakah akan ada perbaikan untuk itu? Gambar CORS tidak ditampilkan di sini juga :(

Hai Rookev,

Anda dapat melakukannya dengan melewatkan salah satu opsi di fungsi html2canvas. Dan percayalah ini pasti akan berhasil :)

html2canvas($('#div_pdf')[0],
{
useCORS: true, //Dengan melewatkan opsi ini dalam fungsi Gambar asal silang akan ditampilkan dengan benar dalam versi PDF yang diunduh
dirender: fungsi (kanvas) {
canvasToImageSuccess(kanvas);
}
});
Untuk info lebih lanjut, Anda dapat melihat dokumentasi perpustakaan html2canvas di URL di bawah ini-:
https://html2canvas.hertzen.com/documentation.html

Hai @gauravmishra24 , sayangnya ini tidak berhasil. Masalahnya adalah saya ingin memasukkan gambar dari server di mana server memiliki bendera

Access-Control-Allow-Origin: *

tidak diatur

:(

Hai Rookev,

Bisakah Anda memposting cuplikan kode Anda?

Sehingga saya dapat memiliki tampilan yang lebih baik pada hal yang sama .....

Hai,

Apakah ada perbaikan untuk ini? Bahkan dengan useCORS disetel ke true, gambar tidak diunduh. Masih mendapatkan kesalahan lintas-Asal seperti yang disebutkan di atas.

Juga, tidak yakin tentang solusi Cristy94 dalam file html2Canvas.js terdistribusi. Bahkan setelah mengubah kode dalam file terdistribusi, sesuai https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402 itu juga tidak berfungsi.

Untuk alternatif lain, dengan pengaturan proxy, apakah ada solusi untuk aplikasi sudut 2?
Daftar situs saat ini (https://github.com/niklasvh/html2canvas/wiki/Proxies) tidak memilikinya!

Apakah ini masih menjadi masalah dengan v1.0.0 ? Jika demikian, bisakah Anda membagikan contoh di jsfiddle .

Masalah ini telah ditutup secara otomatis karena belum ada tanggapan atas permintaan kami untuk informasi lebih lanjut dari penulis asli. Dengan hanya informasi yang sedang dalam masalah, kami tidak memiliki cukup informasi untuk mengambil tindakan. Silakan hubungi jika Anda memiliki atau menemukan jawaban yang kami butuhkan sehingga kami dapat menyelidiki lebih lanjut.

@niklasvh Berikut adalah contoh saya di codepen dengan v1.0.0:
https://codepen.io/Onlylonger/pen/ppjPKX
pertanyaan yang sama. terima kasih

Apakah ada plugin lain yang ada yang tahu. Ini tidak berfungsi dengan permintaan server yang berbeda. Tidak ada contoh yang tepat yang diberikan untuk proxy.

@vinayistar Anda dapat mencoba perubahan saya, lihat tautan https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

Menggunakan useCORS dan mengatur atribut img crossOrigin:anonymous

{ useCORS: false, allowTaint: true } ini berhasil untuk saya

Solusi saya untuk masalah ini adalah mengonversi gambar src ke Base64

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

@todoi Bisakah Anda memberikan contoh ini dengan jspdf.

@nishanta454
Ini adalah contoh yang saya tulis. html2canvas merender gambar asal silang .
Dalam contoh ini, saya menggunakan cors-anywhere untuk menambahkan header CORS ke permintaan gambar proxy.

Hal pertama yang kita butuhkan adalah server yang dikonfigurasi untuk meng-host gambar dengan header Access-Control-Allow-Origin dikonfigurasi untuk mengizinkan akses lintas-asal ke file gambar.
dari CORS_enabled_image