Html2canvas: Рендеринг холста размытый на дисплеях Retina

Созданный на 24 мая 2014  ·  37Комментарии  ·  Источник: niklasvh/html2canvas

Спасибо за отличную библиотеку! Одна вещь, которую я замечаю, заключается в том, что при использовании дисплея Retina снимки экрана получаются размытыми. Например, вот как выглядит снимок экрана https://github.com/niklasvh/html2canvas на дисплее Retina (взятый с тестовой страницы ).
screen shot 2014-05-24 at 1 29 51 pm

Я думаю, может быть, нужно проверить соотношение между window.devicePixelRatio и context.backingStorePixelRatio где-нибудь при рендеринге холста ...?

ps Вот несколько полезных ссылок, на которые я наткнулся, пытаясь разобраться в корне проблемы.

Самый полезный комментарий

Очевидно, вы можете использовать существующий холст для рендеринга (который вы можете предварительно настроить для отображения в сетчатке).

Пример:

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
});

Все 37 Комментарий

Эта библиотека отличная, но я тоже испытываю это. Я думаю, что это та же проблема, что и # 379, # 373, # 340, # 203, # 312 и # 158, и она упоминается в # 390.

Есть обновления по этому поводу?

https://github.com/niklasvh/html2canvas/pull/127 исправить размытость

не фиксируется

: +1:

+1 пожалуйста исправьте

+1 стили css масштабирования и масштабирования не работают правильно? Это можно решить, увеличив масштаб HTML, сделав снимок экрана, и он должен выглядеть резче

+1 пожалуйста исправьте

+1 исправление

@zqcloveping
Братан, попробуй эти конфиги, не решает на 100%, а повышает качество

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

@breim
Bro , 3Q за вашу помощь, но это кажется менее очевидным. Проблемы с отрисовкой в ​​устройствах Retina

Пожалуйста, исправьте!

+1 пожалуйста исправьте

Plz исправить это, Orz

+1

Очевидно, вы можете использовать существующий холст для рендеринга (который вы можете предварительно настроить для отображения в сетчатке).

Пример:

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 Ваше решение прекрасно работает.

Я бы тоже хотел это исправить, пожалуйста

+1

+1 Исправление

@MisterLamb Я пробую ваше решение, но не могу заставить его работать. Я создал эту скрипку с вашим исправлением, которое, похоже, ничего не делает - вы знаете, что я делаю не так? Вы можете нажать кнопку в скрипте и разрешить загрузку нескольких файлов, чтобы проверить это и убедиться, что они идентичны в этой реализации.
original
notimproved

@MisterLamb ах только что изменился на 0.5.0-alpha1 и работает лучше , спасибо. Обновил

+1

@MisterLamb et al, только что попробовали сегодня, и этот фрагмент больше не работает с 0.5.0 b4 - получает пустой холст - и отображается правильно, если не используется собственный холст.

edit: вероятно, моя ошибка, измененная скрипка в порядке.

редактировать 2: не удалось сузить его, переопределил вот так, и теперь у меня есть что-то видимое, но с некоторым смещением. возможно, где-то есть стиль, который h2c не поддерживает полностью, и это портит результат :( Мне повезло.

изменить 3: да, пришлось переместить его в document.body, чтобы избавиться от смещения.

@MisterLamb, ты настоящий гений, спасибо, что поделились ... это спасло мне день

@MisterLamb, ты лучший 👍

@makc я тоже! получение пустого холста - и правильная визуализация, если не используется собственный холст.

К вашему сведению - решение @eKoopmans пока хорошо работает при тестировании: https://github.com/niklasvh/html2canvas/pull/1087 .. В настоящее время работает с ним

Закрытие в пользу # 1087

@MisterLamb а как улучшить разрешение изображения ??
когда я пытаюсь сохранить это изображение, оно сохранено с разрешением 96 точек на дюйм, мне нужно изображение с разрешением 300+ точек на дюйм. как я могу это сделать ???

@ shivtumca12 в последней версии v1.0.0-alpha.1 вы можете использовать опцию scale для увеличения разрешения ( scale: 2 удвоит разрешение по сравнению с 96 dpi по умолчанию).

// Масштабирование на 90% перед вызовом html2canvas, затем на 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 Вышеупомянутое решение работает для текстов на странице html. При отображении текста он блестяще преобразует текст в изображении. Но содержимое изображения (изображение) html-страницы все еще отображается с размытием. Пожалуйста, посоветуйте мне, как это исправить.

Для меня изображения все еще остаются размытыми.

window.devicePixelRatio = 2;

Я поставил это до того, как сделал html2canvas, и у меня это сработало

Привет, я хочу ввести персидский текст utf8, но шрифт не работает
Как решить эту проблему
notimproved (3)

с http://jsfiddle.net/o0a8pbwd/1/ кодами

image

Почему это изображение не знает?

Была ли эта страница полезной?
0 / 5 - 0 рейтинги