Html2canvas: Le rendu du canevas est flou sur les écrans Retina

Cette bibliothèque est géniale, mais en fait l'expérience aussi. Je pense que c'est le même problème que # 379, # 373, # 340, # 203, # 312 et # 158 et mentionné dans # 390.

Des mises à jour à ce sujet?

https://github.com/niklasvh/html2canvas/pull/127 corrige le flou

pas fixe

: +1:

+1 veuillez corriger

Les styles CSS de scalling +1 et de zoom ne fonctionnent pas correctement? Il pourrait être résolu en zoomant sur le html en prenant une capture d'écran et cela devrait paraître plus net

+1 veuillez corriger

+1 correction

@zqcloveping
Bro, essayez cette configuration, ne résolvez pas à 100% mais augmente la qualité

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

@breim
Bro ， 3Q pour votre aide, mais cela semble moins évident.

Regle-le, s'il te plait!

+1 veuillez corriger

Plz le réparer, Orz

+1

Apparemment, vous pouvez utiliser un canevas existant pour le rendu (que vous pouvez préconfigurer pour être affiché dans Retina).

Exemple:

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 Votre solution fonctionne à

J'aimerais aussi que ce soit corrigé

+1

+1 Correction

@MisterLamb J'essaie votre solution mais je n'arrive pas à la faire fonctionner. J'ai créé ce violon avec votre correctif qui ne semble rien faire - savez-vous ce que je fais de mal? Vous pouvez cliquer sur le bouton dans le violon et autoriser le téléchargement de plusieurs fichiers pour le tester et voir qu'ils sont identiques dans cette implémentation.

@MisterLamb ah vient de passer à 0.5.0-alpha1 et fonctionne mieux , merci. Mise à jour du

+1

@MisterLamb et al, juste essayé aujourd'hui, et cet extrait de code ne fonctionne plus avec 0.5.0 b4 - obtenir un canevas vide - et rendu correctement s'il n'utilise pas son propre canevas.

edit: probablement mon bug, le violon modifié est correct.

edit 2: impossible de le réduire, réimplémenté comme ça et maintenant j'ai quelque chose de visible mais avec un décalage. peut-être y a-t-il quelque part un style que h2c ne prend pas entièrement en charge et cela gâche le résultat: (lucky me.

edit 3: oui, a dû le déplacer vers document.body pour se débarrasser de l'offset.

@MisterLamb vous êtes un vrai génie, merci pour le partage ... ça m'a sauvé la journée

@MisterLamb vous êtes le meilleur 👍

@makc moi aussi! obtenir un canevas vide - et rendu correctement si vous n'utilisez pas votre propre canevas.

FYI - La solution https://github.com/niklasvh/html2canvas/pull/1087 .. Actuellement en cours d'exécution avec elle

Clôture en faveur du # 1087

@MisterLamb mais comment améliorer la résolution de l'image ??
lorsque j'essaie d'enregistrer cette image, elle a été enregistrée en 96 dpi, j'ai besoin d'une image de 300+ dpi. Comment puis-je faire ceci ???

@ shivtumca12 dans la dernière version, v1.0.0-alpha.1 , vous pouvez utiliser l'option scale pour augmenter la résolution ( scale: 2 doublera la résolution de 96 dpi par défaut).

// Zoomez à 90%, avant d'appeler html2canvas, puis faites un zoom arrière à 100%.

document.body.style.zoom = '99% ';
html2canvas (document.querySelector ("# content"), {allowTaint: false, widht: _width, height: _height}). then (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 La solution ci-dessus est travaillée pour les textes de la page html. Lors de l'affichage du texte, il convertira le texte de l'image avec brio. Mais le contenu de l'image (image) de la page html s'affiche toujours avec du flou. Veuillez me conseiller comment le corriger.

Les images sont toujours floues pour moi aussi.

window.devicePixelRatio = 2;

J'ai mis cela avant de faire html2canvas et cela a fonctionné pour moi

Bonjour, je veux entrer le texte persan utf8, mais la police échoue
Comment résoudre ce problème

avec les codes http://jsfiddle.net/o0a8pbwd/1/

Pourquoi cette image ne le sait-elle pas?