I am new in PHP GD library. Basically, my requirement is to create an image using HTML content. HTML content might have HTML tags like b, i, img etc (include all available HTML tags). We will also have to set font-name, font size, font-color, font-weight and x-y position of HTML element. All HTML tags need to be rendered on a PNG image called background image (which will be dynamic and different in every image).
I have also tried the solution from the Render HTML to an image but unfortunately it does not render image tag. My code is as follows:
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();
}
I have used img tag in above content but it does not render by using above code, please review and suggest solution for this.
I have also tried html2canvas.js to generate image (reference link is html2canvas). It successfully rendered img tag but i am unable to download the image using toDataURL() function. If i removed the img tag then using the same code snippet i am able to download the image. htmltocanvas code is as follows:
<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>
Please suggest solution for any of above method. Please suggest. How to create an image using HTML content? Apart from the GD library, is there another way to do this?
