Блог

Я использую html2canvas для получения изображения html-элемента(ввод[тип=’текст’]). У меня есть элемент управления, который увеличивает размер шрифта текстового поля, а также размер поля для размещения в нем текста.

Перед изменением шрифта html2canvas правильно получает изображение поля и его содержимое. Но когда размер шрифта увеличивается, изображение снова отображается не полностью. Я поместил красную рамку вокруг холста, а серая граница-это та, которая окружает привязываемый html-элемент.

Вот код, который делает снимок:

 function snapElem(el) { function hiddenClone(element){ // Create clone of element let clone = element.cloneNode(true); // Position element relatively within the // body but still out of the viewport let style = clone.style; style.position = 'relative'; style.top = window.innerHeight   'px'; style.left = 0; // Append clone to body and return the clone document.body.appendChild(clone); return clone; }// Clone element let clone = hiddenClone(el); clone.id = "za-clone-id-" new Date().getTime();// Use clone with htm2canvas and delete clone html2canvas(clone, { backgroundColor:null, allowTaint: true, useCORS: true }).then(function (canvas) { canvas.style.border = '2px solid red'; console.log(canvas.toDataURL()); canvas.id = "za-real-id-" new Date().getTime(); document.body.removeChild(clone); document.querySelector(".body-right").appendChild(canvas); }).catch((e) =gt; { // Handle errors console.log(e); });} 

Вот изображения, полученные при изменении размера шрифта поля

How can the content remain centered within the canvas when the font size changes.

The page has no scrolling.