создать изображение с содержимым HTML с помощью библиотеки PHP GD - PullRequest
Новая
       23

создать изображение с содержимым HTML с помощью библиотеки PHP GD

0 голосов
/ 21 января 2019

Я новичок в библиотеке PHP GD. По сути, мое требование заключается в создании изображения с использованием содержимого HTML. Содержимое HTML может содержать теги HTML, такие как b, i, img и т. Д. (Включая все доступные теги HTML). Нам также нужно будет указать имя шрифта, размер шрифта, цвет шрифта, вес шрифта и положение x-y элемента HTML. Все HTML-теги должны отображаться на изображении в формате PNG, которое называется фоновым изображением (оно будет динамичным и разным для каждого изображения).

Я также попробовал решение из Отображение HTML в изображение , но, к сожалению, оно не отображает тег изображения. Мой код выглядит следующим образом: 

const {body} = document;

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 500;

const tempImg = document.createElement('img');
tempImg.addEventListener('load', onTempImageLoad);
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><div style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;"><strong>Codepedia.info</strong><hr/><h3 style="color: #3e4b51;">Html to canvas, and canvas to proper image </h3><img src="https://www.dike.lib.ia.us/images/sample-1.jpg/" height="100" width="100" /><p style="color: #3e4b51;"> <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net, C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs,  Web Design, Software</p><p style="color: #3e4b51;"><b>html2canvas</b> script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation.</p></div></div></foreignObject></svg>');

const targetImg = document.createElement('img');
body.appendChild(targetImg);

function onTempImageLoad(e) {
  ctx.drawImage(e.target, 0, 0);
  targetImg.src = canvas.toDataURL();
}

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

Я также пытался создать файл html2canvas.js (ссылка html2canvas ). Он успешно обработал тег img, но я не могу загрузить изображение с помощью функции toDataURL (). Если я удалил тег img, используя тот же фрагмент кода, я смогу загрузить изображение. htmltocanvas код выглядит следующим образом: 

<html>
<head>
 <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="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>
        <img src="https://www.dike.lib.ia.us/images/sample-1.jpg" height="100" width="100" />
        <p style="color: #3e4b51;"> 
            <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net,
            C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs,
            Web Design, Software
        </p>
        <p style="color: #3e4b51;">
            <b>html2canvas</b> script allows you to take "screenshots" of webpages or parts
            of it, directly on the users browser. The screenshot is based on the DOM and as
            such may not be 100% accurate to the real representation.
        </p>
    </div>

    <a id="btn-Convert-Html2Image" href="#">Download</a><br/>
    <h3>Preview :</h3>
    <div id="previewImage"></div>

<script>
$(document).ready(function(){

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

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

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

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

Пожалуйста, предложите решение для любого из вышеуказанных методов. Пожалуйста, предложите. Как создать изображение, используя контент HTML? Есть ли другой способ, кроме библиотеки GD?

...