Html2canvas: La representación del lienzo es borrosa en las pantallas Retina

Esta biblioteca es genial, pero también está experimentando eso. Creo que este es el mismo problema que # 379, # 373, # 340, # 203, # 312 y # 158 y mencionado en # 390.

¿Alguna actualización sobre esto?

https://github.com/niklasvh/html2canvas/pull/127 corrige lo borroso

no arreglado

: +1:

+1 por favor arregle

Los estilos CSS de escalado y zoom +1 no funcionan, ¿verdad? Podría resolverse haciendo zoom en html tomando una captura de pantalla y debería verse más nítido

+1 por favor arregle

+1 fijo

@zqcloveping
Hermano, prueba esta configuración, no resuelve al 100% pero aumenta la calidad

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

@breim
Bro, 3Q por tu ayuda, pero parece ser menos obvio. Problemas de reproducción en los dispositivos de retina

¡Por favor, arreglalo!

+1 por favor arregle

Por favor arréglalo, Orz

+1

Aparentemente, puede usar un lienzo existente para renderizar (que puede preconfigurar para que se muestre en retina).

Ejemplo:

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 Su solución funciona de manera brillante.

También me gustaría arreglar esto por favor

+1

+1 fijo

@MisterLamb Estoy probando su solución, pero parece que no puedo hacer que funcione. Creé este violín con tu solución que no parece hacer nada, ¿sabes lo que estoy haciendo mal? Puede hacer clic en el botón en el violín y permitir la descarga de varios archivos para probarlo y ver que son idénticos en esta implementación.

@MisterLamb ah acaba de cambiar a 0.5.0-alpha1 y funciona mejor , gracias. Actualizado el

+1

@MisterLamb et al, lo intentaron hoy, y este fragmento ya no funciona con 0.5.0 b4 (obteniendo un lienzo vacío) y se procesa correctamente si no usa su propio lienzo.

editar: probablemente mi error, el violín alterado está bien.

edición 2: no pude reducirlo, reimplementado así y ahora tengo algo visible pero con algún desplazamiento. tal vez haya un estilo en alguna parte que h2c no admita por completo y arruine el resultado :( suerte de mí.

edición 3: sí, tuve que moverlo a document.body para deshacerse del desplazamiento.

@MisterLamb eres un verdadero genio, gracias por compartir ... me salvó el día

@MisterLamb eres el mejor 👍

@makc yo también! obteniendo un lienzo vacío, y renderizado correctamente si no se usa su propio lienzo

FYI - La solución https://github.com/niklasvh/html2canvas/pull/1087 .. Actualmente se ejecuta con ella

Cierre a favor del # 1087

@MisterLamb pero ¿cómo mejorar la resolución de la imagen?
cuando intento guardar esta imagen, se guardó en 96 ppp, necesito una imagen de más de 300 ppp. como puedo hacer esto ???

@ shivtumca12 en la última versión, v1.0.0-alpha.1 , puede usar la opción scale para aumentar la resolución ( scale: 2 duplicará la resolución de los 96 ppp predeterminados).

// Amplíe el 90%, antes de llamar a html2canvas, luego amplíe el zoom al 100%.

document.body.style.zoom = '99% ';
html2canvas (document.querySelector ("# content"), {allowTaint: false, widht: _width, height: _height}). luego (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 solución anterior funciona para textos en la página html. Mientras muestra texto, convertirá el texto de la imagen de forma brillante. Pero el contenido de la imagen (imagen) de la página html todavía se muestra con desenfoque. Por favor, avíseme cómo puedo corregirlo.

Las imágenes siguen siendo borrosas para mí también.

window.devicePixelRatio = 2;

Puse esto antes de hacer html2canvas y funcionó para mí

Hola, quiero ingresar el texto persa utf8, pero la fuente falla
Cómo resolver este problema

con http://jsfiddle.net/o0a8pbwd/1/ códigos

¿Por qué esta imagen no lo sabe?