Html2canvas: Rendering kanvas buram pada tampilan retina

Perpustakaan ini bagus, tapi juga mengalaminya. Saya rasa ini adalah masalah yang sama dengan # 379, # 373, # 340, # 203, # 312, dan # 158 dan disebutkan di # 390.

Ada pembaruan tentang ini?

https://github.com/niklasvh/html2canvas/pull/127 perbaiki buram

tidak tetap

: +1:

+1 tolong perbaiki

Gaya css scalling dan zooming +1 tidak berfungsi, bukan? Ini bisa diatasi dengan memperbesar html mengambil tangkapan layar dan itu akan terlihat lebih tajam

+1 tolong perbaiki

1 perbaikan

@bayu_joo
Bro, coba konfigurasi ini, tidak menyelesaikan 100% tetapi meningkatkan kualitas

html2canvas (document.getElementById ('flag'), {
useCORS: true,
allowTaint: true,
letterRendering: benar,
onrendered: function (canvas) {
var ctx = canvas.getContext ('2d');
ctx.webkitImageSmoothingEnabled = salah;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
},
});

@sedikit
Bro, 3Q atas bantuan Anda. Tapi tampaknya kurang jelas. Masalah rendering di perangkat retina

Tolong perbaiki!

+1 tolong perbaiki

Tolong perbaiki, Orz

+1

Rupanya Anda dapat menggunakan kanvas yang ada untuk rendering (yang dapat Anda konfigurasi untuk ditampilkan di retina).

Contoh:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

@MisterLamb Solusi Anda bekerja dengan sangat baik.

Saya juga ingin ini diperbaiki

+1

+1 Perbaiki

@MisterLamb Saya mencoba solusi Anda tetapi tampaknya tidak berhasil. Saya telah membuat biola ini dengan perbaikan Anda yang sepertinya tidak melakukan apa-apa - tahukah Anda apa yang saya lakukan salah? Anda dapat mengklik tombol di biola dan mengizinkan pengunduhan beberapa file untuk mengujinya dan melihat bahwa keduanya identik dalam penerapan ini.

@MisterLamb ah baru saja diubah menjadi 0.5.0-alpha1 dan berfungsi lebih baik , terima kasih. Memperbarui

+1

@MisterLamb dkk, baru saja mencoba hari ini, dan potongan ini tidak lagi berfungsi dengan 0.5.0 b4 - mendapatkan kanvas kosong - dan ditampilkan dengan benar jika tidak menggunakan kanvas sendiri.

edit: mungkin bug saya, biola yang diubah tidak apa-apa.

edit 2: tidak dapat mempersempitnya, diimplementasikan kembali seperti ini dan sekarang saya memiliki sesuatu yang terlihat tetapi dengan beberapa offset. mungkin ada gaya di suatu tempat yang h2c tidak sepenuhnya mendukung dan itu mengacaukan hasilnya :( aku beruntung.

edit 3: ya, harus memindahkannya ke document.body untuk menghilangkan offset.

@MisterLamb Anda benar-benar jenius, terima kasih telah berbagi ... itu menyelamatkan hari saya

@MisterLamb kamu yang terbaik 👍

@Mak saya juga! mendapatkan kanvas kosong - dan dirender dengan benar jika tidak menggunakan kanvas sendiri.

FYI - Solusi @eKoopmans sejauh ini bekerja dengan baik dalam pengujian: https://github.com/niklasvh/html2canvas/pull/1087 .. Saat ini berjalan dengan itu

Menutup untuk # 1087

@MisterLamb tapi bagaimana cara meningkatkan resolusi gambar ??
ketika saya mencoba menyimpan gambar ini, gambar ini disimpan dalam 96dpi, saya membutuhkan gambar 300+ dpi. bagaimana saya bisa melakukan ini ???

@ shivtumca12 di rilis terbaru, v1.0.0-alpha.1 , Anda dapat menggunakan opsi scale untuk meningkatkan resolusi ( scale: 2 akan menggandakan resolusi dari 96dpi default).

// Zoom 90%, sebelum memanggil html2canvas, kemudian perbesar kembali ke 100%.

document.body.style.zoom = '99% ';
html2canvas (document.querySelector ("# content"), {allowTaint: false, widht: _width, height: _height}). lalu (function (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@MisterLamb Solusi di atas Anda bekerja untuk teks di halaman html. Saat menampilkan teks, itu akan mengubah teks dalam gambar dengan cemerlang. Namun konten gambar (image) halaman html masih terlihat kabur. Tolong beri tahu saya bagaimana bisa memperbaikinya.

Gambar juga masih buram untuk saya.

window.devicePixelRatio = 2;

Saya meletakkan ini sebelum saya membuat html2canvas dan itu berhasil untuk saya

Hai, saya ingin memasukkan teks Persia utf8, tetapi fonta gagal
Bagaimana mengatasi masalah ini

dengan http://jsfiddle.net/o0a8pbwd/1/ kode

Mengapa gambar ini tidak tahu?