Html2canvas: Cara meningkatkan resolusi gambar yang dihasilkan melalui toDataURL

Saya tahu ada pembicaraan tentang ini di beberapa titik dalam masalah/permintaan lain dan seseorang telah mengirimkan permintaan tarik, tetapi saya tidak pernah melihat permintaan tarik bergabung.

Saya memiliki metode kerja yang kami gunakan untuk memeriksa kerapatan piksel perangkat. Tapi ini bisa berdampak pada kinerja. Alih-alih, mungkin kita ingin memiliki paramater untuk memberitahunya agar dirender dengan dpi yang lebih tinggi?

@missing Ya parameter untuk menentukan DPI akan luar biasa.

Juga jika Anda tidak keberatan membagikan metode kerja untuk kerapatan piksel perangkat, itu akan keren. Aplikasi utama saya adalah hanya mengekspor png dari cloud kata dengan istilah maksimum 50-an. Jadi saya tidak terlalu mempermasalahkan performa hit yang satu ini.

apakah masalah Anda adalah kualitas gambar atau efek buram (dalam beberapa kasus beberapa gambar dihasilkan oleh html2canvas dengan efek buram)?

@brcontainer Saya pikir kualitas gambar adalah masalahnya. Menurut saya. Misalnya Pada 100% zoom foto terlihat ok-layak-ish. Tetapi begitu saya memperbesar bahkan 5%, Anda dapat melihat penurunan kualitas foto yang nyata. Silakan lihat gambar terlampir.

Saya hanya bisa memastikan sesuatu melihat contoh masalah saat runtime.

Coba tempat yang sama menggunakan http://jsfiddle.net/ , dan posting tautannya di sini.

[sunting]
kemungkinan Anda mencoba menerapkan _zoom_ di kanvas yang dihasilkan oleh html2canvas, Anda dapat mencoba menggunakan (sebelum menyimpan sebagai gambar):

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

Semoga beruntung

Hai,

Kami membutuhkan resolusi yang lebih tinggi dari 96DPI. Kami membutuhkan lebih seperti 300 DPI.

Apakah ini _mungkin_ untuk dilakukan dengan html2canvas?

Kami memiliki masalah yang sama dengan keburaman pada gambar. Kami membutuhkan solusi apa pun, yang akan menghilangkan kekaburan kami, dan memberi kami DPI yang terlihat bagus.

Adakah pemikiran/saran tentang bagaimana hal ini dapat dilakukan, atau cara alternatif apa pun untuk mencapai efek yang sama?

Terima kasih

@brcontainer Saya baru saja mengedit Anda sekarang. Saya melakukan apa yang Anda sarankan dan masih belum berhasil dengan kualitas gambar. Inilah yang saya lakukan -

                var ctx = canvas.getContext('2d');

                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var rawData = canvas.toDataURL("image/png");

dalam urutan yang salah, Anda harus menerapkan "ImageSmoothingEnabled" sebelum mengubah ukuran gambar.

Letakkan contoh kode Anda di http://jsfiddle.net dan saya akan mencoba mengeditnya

Halo kawan-kawan,

Saya ingin mengunggah gambar resolusi tinggi tanpa batasan 96dpi dari toDataURL. Karena toDataURLHD belum tersedia, bagaimana saya bisa mewujudkan impian saya? :-)

Terima kasih sebelumnya atas petunjuk apa pun

@brcontainer Saya tidak yakin saya mengerti apa yang Anda maksud dengan menerapkan perataan sebelum mengubah ukuran, karena saya tidak mengubah ukuran gambar sama sekali. Bagaimanapun saya telah membuat jsfiddle untuk Anda lihat di http://jsfiddle.net/tankchintan/92mra/4/

Benar-benar menantikan untuk menyelesaikan ini! :)

Sobat bingung, ada toDataURL yang harus diubah ukurannya, Anda harus mengubah ukuran CANVAS .
Saya mencoba membuat contoh, tetapi tetap tidak berhasil.

Hai,

Saya telah mencoba mengikuti saran ini untuk kualitas gambar yang lebih baik, dan itu juga tidak jelas bagi saya.

brcontainer, apakah mungkin Anda bisa mengklarifikasi, atau mengubah/membuat biola JS yang dibuat tankchintan, dengan ide-ide yang Anda bicarakan? Ini tidak masuk akal bagi saya, bahkan jika kita membuat gambar dengan ukuran 2x, piksel pada gambar tetap ada setelah kita mengubah gambar menjadi 192 DPI.

Hai teman-teman, apakah ada tanggapan lagi tentang masalah ini? Saya mengalami kualitas gambar yang sangat pro dengan html2canvas dibandingkan dengan sesuatu seperti PhantomJS di mana Anda dapat mengatur zoomFactor (di antara tweak lainnya) untuk meningkatkan kualitas/resolusi.

Saya memiliki masalah serupa. Saya memiliki persyaratan untuk mendapatkan snapshot halaman web ke dalam dokumen PDF yang saya gunakan html2canvas untuk mengonversi div saya menjadi gambar dan kemudian saya menggunakan iTextsharp untuk menambahkan gambar ke PDF. Namun, gambar yang dihasilkan tampak agak buram dan menyulitkan mata untuk terus-menerus melihatnya. Saya ingin tahu apakah saya dapat membuat gambar dengan resolusi tertentu pada waktu pembuatan sendiri di html2canvas.

Hai,
Saya memiliki persyaratan yang sama persis seperti di atas. dan masalah yang sama yang saya hadapi.
"Mendapatkan snapshot halaman web ke dalam dokumen PDF yang saya gunakan html2canvas untuk mengonversi div saya menjadi gambar dan kemudian menambahkan gambar ke PDF."
Namun, gambar yang dihasilkan tampak agak buram.

Saya mengikuti saran di atas tetapi saya masih mendapatkan gambar buram.
di sini dalam kode saya: html2canvas menghasilkan snapshot halaman web berdasarkan Resolusi sistem.
Saya mendapatkan "snapshot" halaman web yang sama dalam ukuran berbeda, berdasarkan resolusi sistem.

Contoh :
ukuran gambar : 816x422
ukuran gambar :1193x437
ukuran gambar: 1275x437
Di sini harapan saya adalah: Dimensi 2000 x 1784 ke atas.

apakah mungkin untuk mendapatkan Dimensi gambar ini.
tolong beri saran Anda yang berharga dan terima kasih atas waktu Anda yang berharga.

+1 untuk ini. Mencari untuk mendapatkan gambar dengan html2canvas untuk dimasukkan ke dalam PDF, tetapi mendapatkan kualitas buram.

Sudahkah Anda mencoba menggunakan matriks transformasi CSS pada parentNode ke elemen yang ingin Anda ekspor pada resolusi yang lebih tinggi? Ini bekerja untuk saya. Misalnya "transform: scale(2, 2)"

@mudcube berhasil sebagian untuk saya

@brcontainer berfungsi dengan baik untuk saya

apakah ada solusi yang ditemukan?? tolong bagikan cara meningkatkan resolusi gambar buram saya harus membuat pdf-nya

+1 apakah ada solusi/pedoman untuk ini?

ada solusi yang ditemukan?

Teman-teman, gunakan transform: scale(2, 2) itu berhasil.

Bisakah Anda memberikan detail lebih lanjut?

@matiasinsaurralde tepat sebelum membuat .x2 berisi aturan css dari atas ke elemen, lalu hapus kelas itu dalam panggilan balik html2canvas . Anda akan mendapatkan elemen berukuran ganda dan tangkapan layar berukuran ganda juga. Dan itu mulus sehingga Anda mungkin tidak akan mengamati perubahan ukuran apa pun.

tangkapan layar ketika saya mencoba mengikuti saran Anda @Ajaxy . saya pikir masalahnya ada pada kode saya? butuh waktu lama untuk merender halaman

skala tidak meningkatkan resolusi untuk saya. Harus menyelesaikannya dengan JS -
https://github.com/niklasvh/html2canvas/issues/379

Ada yang beruntung?

transform: scale(2, 2); juga bukan solusi untuk dygraph.js

@premerddyn , lihat solusi saya di masalah tertaut.
Ini berfungsi dengan baik, tetapi membutuhkan pembesaran sebelum tangkapan layar.
Jika komentar saya tidak jelas, saya akan menambahkan lebih banyak penjelasan

baik yang telah saya lakukan adalah membuat div ukuran dua kali dan membuatnya visibilitasnya runtuh dan setiap konten yang saya miliki di sini saya memposting ke div itu dan mengambil tangkapan layar. Dengan begitu tidak ada kejernihan gambar yang hilang dan saya mengubah beberapa kode ukuran font untuk membuatnya work.I mendapatkan ini bekerja dengan baik.Tapi masalah saya adalah dengan teks-stroke dan multiline teks-latar belakang.

penskalaan dengan 2 berfungsi untuk saya, namun, saya menemukan bahwa rendering dibatasi oleh resolusi/ukuran jendela. Jika div yang diskalakan lebih lebar dari jendela, maka sebagian darinya akan terputus

jadi, apakah tidak ada cara untuk menangkap kanvas yang lebih besar dari layar?

Ah, dari utas ini :

var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

Saya mencoba mencapai resolusi tinggi dalam contoh ini tetapi tidak mendapatkannya ...

Klik tombol unduh pngx2 ..

Apakah mungkin untuk melakukan operasi di backend seperti ketika tombol diklik kanvas berubah menjadi dua kali ukurannya dan kemudian gambar diambil dan sekali lagi kanvas diambil kembali ke ukuran biasa ..

Tentu, Anda bisa melakukannya. Saya memicu kanvas dengan ukuran yang saya inginkan menggunakan
kode yang disediakan. Saya menemukan bahwa mendapatkan nilainya bisa jadi tidak akurat, jadi saya hanya
mengatur lebar/tinggi secara langsung.

Pada hari Sabtu, 7 Mei 2016, enjoytheday [email protected] menulis:

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

Saya mencoba mencapai resolusi tinggi dalam contoh ini tetapi tidak berhasil
itu...

Klik tombol unduh pngx2 ..

Apakah mungkin untuk melakukan operasi di backend seperti ketika tombol diklik
kanvas berubah menjadi dua kali ukurannya dan kemudian foto diambil dan kemudian lagi
kanvas diambil kembali ke ukuran biasa..

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/241#issuecomment -217634634

Ilustrasi Berkelanjutan Terpanjang di Dunia
ForeverScape.com http://www.foreverscape.com/ | @foreverscape
https://twitter.com/foreverscape | Di Github
https://github.com/vance/foreverscapecore | Dalam Berita
http://www.foreverscape.com/art/reviews/

@vance bisakah Anda mengatur ini dalam contoh jsfiddle?

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

Saya mencoba tetapi tidak disetel oleh saya.

Anda dapat mengeditnya sepenuhnya atau dapat membuat yang baru.

Ini akan membantu banyak orang :dancer:

Saya mencoba untuk mengejeknya dengan cepat tetapi tidak punya waktu untuk memperbaiki div tes. Menangkap sesuatu dengan transform:scale() tidak melakukan apa-apa karena tinggi internal div _NOT_ terpengaruh. Itu sebabnya ini adalah transformasi. Properti w/h tidak berubah (secara internal), yang dapat Anda uji dengan mendapatkan getBoundingClientRect() . Lebar/tingginya hanya _sebenarnya_ berubah jika dilihat dalam konteks induknya. Anda harus mengambil div wadah setelah diskalakan.

https://jsfiddle.net/jano9ao4/1/

Saya menghadapi masalah yang sama, apakah ada solusi yang bisa diterapkan?ヾ(´･ )ノ"

Saya bisa membuatnya bekerja, untuk menangkap elemen yang lebih besar dari jendela. Ingat saja, Anda tidak bisa mendapatkan gambar "lebih besar" hanya dari elemen yang diubah, karena (untuk dirinya sendiri), ia masih memiliki dimensi yang sama.

Saya harus melakukan milik saya di iframe dan mengirim data base64 kembali sebagai pesan...karena melakukan hal berikut BREAKS acara pengubahan ukuran jendela.

Sekali lagi dengan komentar:

   //store the original size
    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    var w = $(element)[0].ownerDocument.defaultView.innerWidth;

   //set the document to the element's size
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    $(element)[0].ownerDocument.defaultView.innerWidth = $(element).width();

    html2canvas($(element)).then(function(canvas) {
        //restore the document size
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        $(element)[0].ownerDocument.defaultView.innerWidth = w;
        //Do whatever you want with your canvas
    }

Saya menulis fungsi berikut untuk dengan mudah mendapatkan tangkapan layar DPI yang lebih tinggi dari elemen HTML menggunakan html2canvas.

• jika tinggi atau lebar dibatasi (misalnya ada lebar tubuh tetap), kendala harus dihilangkan selama pemrosesan - elemen sumber harus dapat tumbuh hingga skala yang diinginkan
• srcEl harus menjadi elemen yang ada
• destIMG harus menjadi elemen gambar (kosong) yang ada
• dpi harus kelipatan 96

var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
    var scaleFactor = Math.floor(dpi / 96);
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Save original document size
    var originalBodyWidth = document.body.offsetWidth;
    var originalBodyHeight = document.body.offsetHeight;

    // Add style: transform: scale() to srcEl
    srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
    srcEl.style.transformOrigin = "left top";

    // create wrapper for srcEl to add hardcoded height/width
    var srcElWrapper = document.createElement('div');
    srcElWrapper.id = srcEl.id + '-wrapper';
    srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
    srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
    // insert wrapper before srcEl in the DOM tree
    srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
    // move srcEl into wrapper
    srcElWrapper.appendChild(srcEl);

    // Temporarily remove height/width constraints as necessary
    document.body.style.width = originalBodyWidth*scaleFactor +"px";
    document.body.style.height = originalBodyHeight*scaleFactor +"px";

    window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
    html2canvas(srcElWrapper, {
        onrendered: function(canvas) {
            destIMG.src = canvas.toDataURL("image/png");
            srcElWrapper.style.display = "none";
            // Reset height/width constraints
            document.body.style.width = originalBodyWidth + "px";
            document.body.style.height = originalBodyHeight + "px";
        }
    });
};

Penggunaan:

var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)

Apakah Anda menemukan bahwa melakukan ini juga merusak event handler window.onresize? Untuk alasan ini, saya harus melakukan semua ini di dalam iframe dan memposting hasilnya kembali menggunakan parent.window.postMessage(data) untuk mengembalikan konten. Ini hanya penting bagi saya karena ini adalah Aplikasi seluler, dan sangat penting untuk mengaktifkan onresize.

@vance : Dalam kasus saya, saya tidak memerlukan atau menggunakan hal-hal itu - saya sebenarnya menggunakan ini untuk mengatasi bug di perender HTML-ke-PDF. Saya ingin melihat contoh lengkap metode Anda, tampaknya lebih fleksibel.

Saya menemukan cara lain untuk mendapatkan gambar beresolusi tinggi yang tidak perlu mengubah ukuran bodi. Namun, itu harus benar-benar memposisikan elemen sumber karena bug di html2canvas (#790, #820, #893, #922, dll). Berdasarkan kode retina @MisterLamb .

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

Penggunaan:

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

EDIT: Mengurangi peretasan menggunakan pemosisian absolut alih-alih benar-benar memindahkan elemen dan menyesuaikan margin, terima kasih kepada @jason-o-matic atas sarannya.

ini bekerja dengan versi terbaru (0.5.0-alpha). tapi tidak 0.4.1

jika Anda ingin menyelesaikan masalah ini di 0.4.1, Anda harus bermain-main dengan ukuran kanvas.

Hanya catatan singkat untuk siapa saja yang menggunakan perbaikan @airdrummingfool (yang berfungsi dengan baik)...

Anda tidak dapat memiliki elemen "relatif" apa pun yang membungkus elemen yang ingin Anda layar dump tidak peduli seberapa jauh xtree mereka. Mereka perlu dialihkan ke statis selama screendump sehingga elemen yang Anda inginkan benar-benar muncul pada 0,0 relatif terhadap jendela, bukan DIV sekitarnya.

Butuh beberapa jam untuk menyelesaikan ini, jadi saya harap ini membantu seseorang menghindari masalah yang sama.

Selamat siang teman-teman,
apakah ada yang punya jsfiddle dari solusi @airdrummingfool , saya mencoba mengimplementasikannya di proyek saya tanpa hasil. Contoh kerja akan sangat bagus bagi saya untuk memahami cara kerjanya dan akan sangat membantu saya dalam mencoba mengimplementasikannya dalam proyek saya.

Terima kasih banyak atas segala bantuan yang dapat diberikan.

Halo semuanya! Saya mencoba menggunakan solusi @airdrummingfool . Tapi saya mendapatkan satu kesalahan yang mengganggu. Di dalam elemen yang ingin saya ambil gambarnya, ada elemen dan ketika melakukan prosedur, elemen img menjadi kosong dan src diabaikan. Apakah Anda tahu bagaimana saya bisa menyelesaikan ini? Adakah yang pernah menghadapi masalah ini sebelumnya dengan html2canvas?

Terima kasih sebelumnya untuk utas ini! Itu menyelamatkanku!! :D

EDIT: Saya juga hanya mendapatkan setengah dari gambar yang diberikan. Tapi resolusinya terlihat sempurna xD

Memperbaiki masalah gambar!! useCORS tidak diaktifkan! Tapi saya masih mendapatkan hanya setengah dari gambar yang diberikan.

Besar! Setengah gambar mungkin karena masalah rendering di luar kanvas . Saya juga telah membuat permintaan tarik untuk menambahkan resolusi/penskalaan ke html2canvas , Anda mungkin merasa lebih mudah digunakan daripada solusi @airdrummingfool .

Sampai mereka digabungkan ke html2canvas, Anda bisa mendapatkan custom build saya dengan keduanya dan beberapa perbaikan bug lainnya di sini .

Hai @eKoopmans. Terima kasih atas jawaban anda. Saya baru saja berhasil memperbaiki milik saya dengan mengalikan tinggi dengan 2. Tapi, saya rasa saya mendapatkan gambar yang lebih besar dengan spasi putih di atas dan di bawah... jadi... Saya akan mencoba milik Anda dan melaporkan kembali dalam beberapa menit !

OM(F)G @eKoopmans .. Anda bekerja di luar kotak. Terima kasih banyak. Permintaan tarik itu... mereka seharusnya menerimanya sekarang. Ada BANYAK orang yang menginginkan opsi dpi ini untuk html2canvas.

Menutup mendukung #1087

@airdrummingfool ... Terima kasih. Itu bekerja sempurna.

anda dapat menggunakan https://github.com/cburgmer/rasterizeHTML.js

versi terbaru html2canvas memberi Anda opsi penskalaan. Bekerja dengan sangat baik.

html2canvas(elemen, {
skala: 2
});

Untuk rendering pdf beberapa halaman dari html dan konten gambar, menyetel scale: 1 dapat memperbaiki masalah resolusi dan pada saat yang sama menghindari gambar yang melebihi batas pdf.

Saya pikir ini membantu, saya menggunakan html2canvas

Unduh PDF() {
var doc = jsPDF baru({
format: "a4"
});

html2canvas(document.getElementById("pdf-doc"), {
skala: "5"
}).lalu(kanvas => {
this.imgFile = kanvas;
doc.addImage(this.imgFile, "JPEG", 5, 5, 200, 285);
doc.save("nama file" + ".pdf");
});
}