Html2canvas: Способ увеличения разрешения изображения, созданного через toDataURL

Я знаю, что в какой-то момент об этом говорили в других вопросах / запросах, и кто-то отправил запрос на перенос, но я никогда не видел, чтобы запросы на перенос были объединены.

У меня есть рабочий метод, который мы используем для проверки плотности пикселей устройства. Но это может сказаться на производительности. Вместо этого, может быть, мы хотим иметь параметр, чтобы он отображал с более высоким dpi?

@missing Да, параметр для определения DPI было бы здорово.

Также, если вы не против поделиться методом работы с плотностью пикселей устройства, это будет круто. Мое основное приложение - просто экспортировать облако слов в формате png максимум из 50 терминов. Так что я не слишком озабочен производительностью этого.

Ваша проблема - качество изображения или эффект размытия (в некоторых случаях некоторые изображения создаются с помощью html2canvas с эффектом размытия)?

@brcontainer Думаю,

Я могу быть уверен в чем-то, только видя пример проблемы во время выполнения.

Попробуйте то же самое место, используя http://jsfiddle.net/ , и разместите ссылку здесь.

[редактировать]
Если вы пытаетесь применить _zoom_ на холсте, созданном с помощью html2canvas, вы можете попробовать использовать (перед сохранением как изображения):

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

Удачи

Привет,

Нам нужно разрешение выше 96 точек на дюйм. Нам нужно больше 300 точек на дюйм.

Это вообще _возможно_ сделать с html2canvas?

У нас такая же проблема с размытостью изображения. Нам нужно какое-то решение, которое устранит нашу размытость и даст нам хороший вид DPI.

Любые мысли / предложения о том, как это можно сделать, или какие-либо альтернативные способы достижения того же эффекта?

Спасибо

@brcontainer Я сейчас только твою редактирую. Я сделал то, что вы предложили, но с качеством изображения все равно не повезло. Вот что я сделал -

                var ctx = canvas.getContext('2d');

                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var rawData = canvas.toDataURL("image/png");

находится в неправильном порядке, вы должны применить ImageSmoothingEnabled перед изменением размера изображения.

Поместите образец своего кода в http://jsfiddle.net, и я попробую его отредактировать

Привет, народ,

Я хочу загружать изображения с высоким разрешением без ограничения 96dpi toDataURL. Поскольку toDataURLHD еще недоступен, как я могу реализовать свою мечту? :-)

Заранее благодарим за любую подсказку

@brcontainer Я не уверен, что понимаю, что вы имеете в виду, применяя сглаживание перед изменением размера, потому что я вообще не изменяю размер изображения. В любом случае я создал jsfiddle, чтобы вы могли посмотреть http://jsfiddle.net/tankchintan/92mra/4/

Очень жду решения этой проблемы! :)

Друг, вы сбиваете с толку, есть toDataURL , размер которого нужно изменить, вам нужно изменить размер CANVAS .
Я пытаюсь создать пример, но все равно не могу заставить его работать.

Привет,

Я пытался следовать этим советам, чтобы улучшить качество изображения, и мне это тоже непонятно.

brcontainer, можно ли уточнить или изменить / создать скрипт JS, созданный tankchintan, с идеями, о которых вы говорите? Для меня это не имеет смысла, даже если мы создадим изображение в 2 раза больше, пикселизация в изображении все равно останется после того, как мы преобразуем изображение в 192 DPI.

Привет, ребята, есть ли еще отзывы по этому поводу? Я испытываю исключительно профессиональное качество изображения с html2canvas по сравнению с чем-то вроде PhantomJS, где вы можете установить zoomFactor (среди других настроек) для повышения качества / разрешения.

У меня похожая проблема. У меня есть требование получить снимок веб-страницы в PDF-документ, для которого я использую html2canvas для преобразования моего div в изображение, а затем я использую iTextsharp для добавления изображения в PDF. Однако созданное изображение выглядит немного размытым, и глазам сложно постоянно его видеть. Я хочу знать, могу ли я создать изображение с указанным разрешением во время самого создания в html2canvas.

Привет,
У меня точно такое же требование, как и выше. и та же проблема, с которой я столкнулся.
«Получение снимка веб-страницы в PDF-документ, для которого я использую html2canvas, чтобы преобразовать мой div в изображение, а затем добавить изображение в PDF».
Однако созданное изображение выглядит немного размытым.

Я последовал приведенным выше предложениям, но все равно получаю размытое изображение.
здесь, в моем коде: html2canvas создает снимок веб-страницы на основе разрешения системы.
Я получаю один и тот же «снимок» веб-страницы в разных размерах в зависимости от разрешения системы.

Пример :
размер изображения: 816x422
размер изображения: 1193x437
размер изображения: 1275x437
Вот мое ожидание: 2000 x 1784 Размер и выше.

возможно ли получить этот размер изображения.
пожалуйста, дайте ваши ценные предложения и благодарим вас за ваше драгоценное время.

+1 за это. Ищете изображение с html2canvas для вставки в PDF, но получаете размытое качество.

Вы пробовали использовать матрицу преобразования CSS на parentNode для элемента, который хотите экспортировать с более высоким разрешением? У меня это работает. Например, "преобразование: масштаб (2, 2)"

@mudcube частично у меня получился

@brcontainer у меня нормально работает

есть какое-нибудь решение ?? пожалуйста, поделитесь, как улучшить разрешение размытого изображения, мне нужно сделать из него PDF

+1 есть ли еще какое-либо решение / руководство по этому поводу?

какое решение найдено?

Ребят, используйте transform: scale(2, 2) получается.

Не могли бы вы предоставить более подробную информацию?

@matiasinsaurralde прямо перед созданием снимка экрана добавьте к элементу класс css .x2 содержащий правило CSS, затем удалите этот класс в обратном вызове html2canvas . Вы также получите элемент в два раза больше и скриншот в два раза больше. И это бесшовно, поэтому вы, вероятно, не заметите никаких изменений размера.

снимок экрана, когда я попытался последовать предложению ур @Ajaxy . я думаю, проблема в моем коде? на рендеринг страницы ушло так много времени

масштаб не увеличил разрешение для меня. Пришлось решить это с помощью JS -
https://github.com/niklasvh/html2canvas/issues/379

Удачи, ребята?

transform: scale(2, 2); тоже не решение для dygraph.js

@premerddyn , см. мое решение в связанной проблеме.
Он работает хорошо, но перед скриншотом необходимо увеличить.
Если мой комментарий непонятен, я добавлю дополнительные пояснения

Что ж, я сделал div в два раза больше и сделал его видимым, и все содержимое, которое у меня было, я разместил в этом div и сделал снимок экрана. Таким образом, четкость изображения не теряется, и я настроил код размера шрифта, чтобы сделать его У меня все работает нормально, но у меня проблема с текстовым штрихом и многострочным текстовым фоном.

у меня работает масштабирование на 2, однако я считаю, что рендеринг ограничен разрешением / размером окна. Если масштабированный div шире окна, то часть его будет обрезана.

Итак, нет ли возможности снимать холсты размером больше экрана?

Ах, из этой ветки:

var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

Я пытался добиться высокого разрешения в этом примере, но не получил этого ...

Нажмите кнопку загрузки pngx2 ..

Можно ли выполнять операции на бэкэнде, например, когда нажата кнопка, холст становится в два раза больше своего размера, затем захватывается изображение, а затем снова холст возвращается к обычному размеру ..

Конечно, ты мог бы это сделать. Я запускаю холст нужного мне размера, используя
предоставленный код. Я обнаружил, что получение значения может быть неточным, поэтому я просто
установить ширину / высоту напрямую.

В субботу, 7 мая 2016 г., Enjoytheday [email protected] написал:

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

Я попытался добиться высокого разрешения в этом примере, но не получил
что...

Нажмите кнопку загрузки pngx2 ..

Можно ли выполнять операции на бэкэнде, например, при нажатии кнопки
холст становится в два раза больше, затем снимается изображение, а затем снова
холст возвращается к обычному размеру ..

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/241#issuecomment -217634634

Самая длинная текущая иллюстрация в мире
ForeverScape.com http://www.foreverscape.com/ | @foreverscape
https://twitter.com/foreverscape | На Github
https://github.com/vance/foreverscapecore | В новостях
http://www.foreverscape.com/art/reviews/

@vance, не могли бы вы установить это в примере jsfiddle?

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

Я пробовал, но не мной.

Вы можете отредактировать его полностью или создать новый.

Многим будет полезно: dancer:

Я попытался быстро его смоделировать, но у меня не было времени исправить тестовый div. Захват чего-либо с помощью transform:scale() ничего не делает, потому что это _НЕ_ влияет на внутреннюю высоту div. Вот почему это преобразование. Его свойства не изменились (внутренне), что вы можете проверить, получив getBoundingClientRect() . Его ширина / высота изменяются только _фактически_ при просмотре в контексте родителя. Вам нужно захватить контейнер div после его масштабирования.

https://jsfiddle.net/jano9ao4/1/

У меня такая же проблема, есть ли какое-нибудь работоспособное решение? ヾ (´ ･ ･ ｀｡) ノ "

Мне удалось заставить его работать, чтобы захватывать элементы больше, чем окно. Просто помните, вы не можете получить «большее» изображение просто из преобразованного элемента, потому что (для самого себя) он все еще имеет те же размеры.

Мне пришлось сделать свое в iframe и отправить данные base64 обратно в виде сообщения ... потому что выполнение следующих ПЕРЕРЫВОВ событие изменения размера окна.

Снова с комментариями:

   //store the original size
    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    var w = $(element)[0].ownerDocument.defaultView.innerWidth;

   //set the document to the element's size
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    $(element)[0].ownerDocument.defaultView.innerWidth = $(element).width();

    html2canvas($(element)).then(function(canvas) {
        //restore the document size
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        $(element)[0].ownerDocument.defaultView.innerWidth = w;
        //Do whatever you want with your canvas
    }

Я написал следующую функцию, чтобы легко получить снимок экрана с более высоким разрешением из элемента HTML с помощью html2canvas.

• если высота или ширина ограничены (например, есть фиксированная ширина тела), ограничения должны быть удалены во время обработки - исходный элемент должен иметь возможность расти до желаемого масштаба
• srcEl должен быть существующим элементом
• destIMG должен быть существующим (пустым) элементом изображения
• dpi должно быть кратно 96

var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
    var scaleFactor = Math.floor(dpi / 96);
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Save original document size
    var originalBodyWidth = document.body.offsetWidth;
    var originalBodyHeight = document.body.offsetHeight;

    // Add style: transform: scale() to srcEl
    srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
    srcEl.style.transformOrigin = "left top";

    // create wrapper for srcEl to add hardcoded height/width
    var srcElWrapper = document.createElement('div');
    srcElWrapper.id = srcEl.id + '-wrapper';
    srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
    srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
    // insert wrapper before srcEl in the DOM tree
    srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
    // move srcEl into wrapper
    srcElWrapper.appendChild(srcEl);

    // Temporarily remove height/width constraints as necessary
    document.body.style.width = originalBodyWidth*scaleFactor +"px";
    document.body.style.height = originalBodyHeight*scaleFactor +"px";

    window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
    html2canvas(srcElWrapper, {
        onrendered: function(canvas) {
            destIMG.src = canvas.toDataURL("image/png");
            srcElWrapper.style.display = "none";
            // Reset height/width constraints
            document.body.style.width = originalBodyWidth + "px";
            document.body.style.height = originalBodyHeight + "px";
        }
    });
};

Использование:

var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)

Вы обнаружили, что при этом также нарушаются обработчики событий window.onresize? По этой причине мне пришлось сделать все это внутри iframe и отправить результат обратно, используя parent.window.postMessage (data), чтобы вернуть содержимое. Это имеет значение только для меня, потому что это мобильное приложение, и очень важно иметь огонь по размеру.

@vance : В моем случае мне не нужны и не используются какие-либо из этих вещей - я на самом деле использую это, чтобы обойти ошибку в модуле рендеринга HTML в PDF. Хотелось бы увидеть полный пример вашего метода, он кажется более гибким.

Я придумал другой способ получить изображение с высоким разрешением, которое не требует изменения размера тела. Однако он должен абсолютно позиционировать исходный элемент из-за ошибки в html2canvas (# 790, # 820, # 893, # 922 и т. Д.). На основе кода сетчатки @MisterLamb .

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

Использование:

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

РЕДАКТИРОВАТЬ: Уменьшение взлома с использованием абсолютного позиционирования вместо фактического перемещения элемента и настройки полей, благодаря @ jason-o-matic за предложение.

это работает с последней версией (0.5.0-alpha). но не 0.4.1

если вы хотите решить эту проблему в версии 0.4.1, вам придется поэкспериментировать с размером холста.

Небольшая заметка для всех, кто использует

У вас не может быть никаких «относительных» элементов, обертывающих элемент, который вы хотите отображать, независимо от того, насколько далеко они находятся в xtree. Их необходимо переключить в статическое состояние на время отображения экрана, чтобы нужный элемент фактически отображался в 0,0 относительно окна, а не окружающего DIV.

Мне потребовалось несколько часов, чтобы разобраться с этим, поэтому я надеюсь, что это поможет кому-то избежать тех же проблем.

Добрый день, ребята,
есть ли у кого-нибудь jsfiddle решения безуспешно пытаюсь реализовать его в своем проекте. Рабочий пример был бы отличным для меня, чтобы понять, как это работает, и очень помог бы мне в попытке реализовать это в моем проекте.

Большое спасибо за любую помощь, которая может быть предоставлена.

Всем привет! Я пытаюсь использовать решение @airdrummingfool . Но получаю одну досадную ошибку. Внутри элемента, из которого я хочу получить изображение, есть element, и при выполнении процедуры элемент img становится пустым, а src игнорируется. Вы знаете, как я могу это решить? Кто-нибудь сталкивался с этой проблемой раньше с html2canvas?

Заранее спасибо этой ветке! Это меня спасает !! : D

РЕДАКТИРОВАТЬ: Я также получаю только половину визуализированного изображения. Но разрешение выглядит идеально xD

Исправлена ​​проблема с изображением !! UseCORS не был включен! Но я все еще получаю только половину визуализированного изображения.

Большой! Половина изображения может быть связана с проблемой рендеринга вне холста . Я также сделал запрос на перенос , чтобы @airdrummingfool .

Пока они не будут объединены с html2canvas, вы можете получить мою собственную сборку с обоими этими и несколькими другими исправлениями здесь .

Привет, @eKoopmans. Спасибо за Ваш ответ. Мне только что удалось исправить свое, умножив высоту на 2. Но я думаю, что получаю изображение большего размера с пробелами сверху и снизу ... так что ... Я попробую ваше и доложу через несколько минут !

OM (F) G @eKoopmans .. Твоя работа "из коробки". Большое спасибо, чувак. Этот запрос на перенос ... они должны просто принять его сейчас. МНОГИМ людям нужен этот параметр dpi для html2canvas.

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

@airdrummingfool ... Спасибо. Это отлично работает.

вы можете использовать https://github.com/cburgmer/rasterizeHTML.js

последняя версия html2canvas предоставляет вам возможность масштабирования. Работает действительно хорошо.

html2canvas (element, {
масштаб: 2
});

Для многостраничного рендеринга PDF из HTML и содержимого изображений установка scale: 1 может решить проблему с разрешением и в то же время избежать выхода изображений за границу PDF.

Думаю, это помогает, я использовал html2canvas

downloadpdf () {
var doc = new jsPDF ({
формат: «а4»
});

html2canvas (document.getElementById ("pdf-doc"), {
шкала: «5»
}). then (canvas => {
this.imgFile = холст;
doc.addImage (this.imgFile, «JPEG», 5, 5, 200, 285);
doc.save ("имя файла" + ".pdf");
});
}