Как отобразить изображение при конвертации HTML в изображение - PullRequest
Новая
       10

Как отобразить изображение при конвертации HTML в изображение

0 голосов
/ 14 апреля 2020

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

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
    <div id="div_card"  style="border-color:grey;border-style:solid;border-width:1px;width:600px; height:450px; padding:15px;margin-left:40px">
					  <div style="display:inline-block;height:20px;"> <div id="sp_name"> Author:John Michael Smith Junior</div></div><br>
					  <div style="display:inline-block;height:120px; width: 120px; float:right"> 
								  <img src="htmlimage.jpg" style="height:120px; width: 120px"> </div>
					  <div style="display:inline-block;height:20px;"><div> Published on March 1982 </div></div><br>
					  <div style="display:inline-block;height:20px;"> <div> Published by: Mark Vin book house</div></div><br>
					  <div style="display:inline-block;height:20px;"> <div>Last Edition Dec 1999</div></div><br>
					  <div style="display:inline-block;height:20px;"> <div>Sold Copies: 150000</div></div><br>				  
				</div>
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <br />
    <div id="previewImage" style="display: none;">
    </div>

    <script>
        $(document).ready(function () {
            var element = $("#div_card"); // global variable
            var getCanvas; // global variable

            html2canvas(element, {
                onrendered: function (canvas) {
                    $("#previewImage").append(canvas);
                    getCanvas = canvas;
                }
            });

            $("#btn-Convert-Html2Image").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                // Now browser starts downloading it instead of just showing it
                var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
            });
        });

    </script>
</body>
</html>

Мне нужно получить изображение без изменения шрифта. Как я могу это сделать ??????

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Нет необходимости в холсте - это изображение типа

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

Пример использования html2canvas в современном стиле, добавление захваченного холста на страницу 

html2canvas(document.body).then(canvas => document.body.appendChild(canvas));

Используя ваш пример

Примечание: безопасность не позволяет ему работать во фрагменте SO. 

addEventListener("load",() => {
    html2canvas(divCard)
      .then(can => {
          // show result of html2canvas
          previewImage.classList.remove("hide");
          previewImage.appendChild(can);

          // show download link and add data url for download.
          downloadLink.classList.remove("hide");
          downloadLink.download = "canvasCap.png";  // name the download file
          downloadLink.href = can.toDataURL("image/png").replace("data:image/png", "data:application/octet-stream");
      })
      .catch(error => {
          previewImage.textContent = "html2canvas error: " + error.message;
          previewImage.classList.remove("hide");
          previewImage.classList.add("error");
      });
});
* { font-family: arial }
.hide { display: none }
.error {color: red }
.titile {font-size: x-large}
#divCard {
  border: 2px solid black;
  padding: 4px;
}
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>

<div id="divCard">
  <div class="titile">Author:John Michael Smith Junior</div>
  <div>Published on March 1982 </div>
  <div>Published by: Mark Vin book house</div>
  <div>Last Edition Dec 1999</div>
  <div>Sold Copies: 150000</div>
</div>
<h4>HTML2CANVAS result...</h4>
<a id="downloadLink" class="hide">download</a>
<div class="hide" id="previewImage"></div>

BTW Его 2020 .. jQuery - это медленный раздутый багаж. Windows прекратил поддержку IE <11 января 31 года в этом году, удалив последний аргумент для релевантности jQuery. </sup>

0 голосов
/ 27 апреля 2020

Это решение, которое я придумал. Это позволяет должным образом включать удаленные и пользовательские шрифты в выходное изображение. Требуется последняя версия Chrome:

  1. Откройте страницу HTML (которую вы хотите sh преобразовать в изображение) в Chrome.
  2. Right щелкните в любом месте фона отображаемой страницы и выберите «Сохранить как».
  3. В диалоговом окне «Сохранить как» выберите параметр «Сохранить как тип» для «Веб-страница, один файл (* .m html»). ) ", затем выберите папку и имя файла, который вы хотите сохранить как. Это преобразует HTML в M HTML и сохраняет его локально. Размер файла будет огромный , поскольку он включает в себя все пользовательские шрифты и, возможно, статичные c изображения в файле.

  4. Go для оболочки командной строки на вашем локальном компьютере и используйте Chrome без головы, чтобы сделать снимок экрана локально сохраненного файла .m html в виде файла PNG.

    Например, если на вашем компьютере установлен Windows 10, локально сохраненный файл "C: \ tmp \ page.m html", и это изображение 16x16, используйте:

    "C: \ Program Files (x86) \ Google \ Chrome \ Приложение \ chrome .exe "--headless --disable-gpu --screenshot = C: \ tmp \ page.png --window-size =" 16,16 "--default-background-color = 0 file: ///C/tmp/page.mhtml

Это сохранит верхнее левое окно 16x16 вашей отрисованной страницы HTML как файл PNG по адресу : C: \ tmp \ image.png.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...