Спасибо за отличную библиотеку! Одна вещь, которую я замечаю, заключается в том, что при использовании дисплея Retina снимки экрана получаются размытыми. Например, вот как выглядит снимок экрана https://github.com/niklasvh/html2canvas на дисплее Retina (взятый с тестовой страницы ).
Я думаю, может быть, нужно проверить соотношение между window.devicePixelRatio
и context.backingStorePixelRatio
где-нибудь при рендеринге холста ...?
ps Вот несколько полезных ссылок, на которые я наткнулся, пытаясь разобраться в корне проблемы.
Эта библиотека отличная, но я тоже испытываю это. Я думаю, что это та же проблема, что и # 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 Я пробую ваше решение, но не могу заставить его работать. Я создал эту скрипку с вашим исправлением, которое, похоже, ничего не делает - вы знаете, что я делаю не так? Вы можете нажать кнопку в скрипте и разрешить загрузку нескольких файлов, чтобы проверить это и убедиться, что они идентичны в этой реализации.
@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, но шрифт не работает
Как решить эту проблему
с http://jsfiddle.net/o0a8pbwd/1/ кодами
Почему это изображение не знает?
Самый полезный комментарий
Очевидно, вы можете использовать существующий холст для рендеринга (который вы можете предварительно настроить для отображения в сетчатке).
Пример: