When converting an image displayed on a web page into pdf, the entire image is cut during the capturing.
After upload a certificate image (.jpeg or .png), I tried to capture the whole certificate using the html2canvas library but the image is cut.
The only this I see is the top-left corner of the certificate image.
But when the image is in image format, the entire image shows.
How can I make it to capture the entire certificate, please?
Here is my result when converting to PDF.
I am going to share my whole HTML and code that converts the captured image into PDF.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p"
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<title></title>
<style type="text/css">
.imgfile { position: relative; object-fit: cover; height: auto; width: 100%; border: none; background-repeat: no-repeat; background-image: url(''); background-size: cover; background-position: center; vertical-align: middle; background-color: white; }
#section { font-size: 12px; text-align: center; display: flex; align-items: stretch; border: none; }
#LabelName { position: absolute; top: 10px; left: 50px; cursor: move; backface-visibility: hidden; background: unset; }
#LabelDate { position: absolute; top: 10px; right: 50px; cursor: move; backface-visibility: hidden; background: unset; }
#NameFontSize { height: 31px; }
#DateFontSize { height: 31px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server">
</asp:ScriptManager>
<div>
<div class="row col-sm-12" style="width: 100%; margin: 0 auto; padding: 6px; margin-right: auto;
margin-left: auto; margin-bottom: 20px">
<div class="col-sm-3" style="width: 100%; margin: 0 auto; padding: 7px; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label ID="Label1" runat="server">Choose Font</asp:Label>
<div class="input-group">
<input type="text" runat="server" class="fonts form-control" id="fonts" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label runat="server" id="Label6">
Name Font Size</label>
<div class="input-group">
<asp:DropDownList ID="NameFontSize" runat="server" CssClass="form-control" onchange="NameSize(this.value)">
</asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label runat="server" id="Label22">
Date Font Size</label>
<div class="input-group">
<asp:DropDownList ID="DateFontSize" runat="server" CssClass="form-control" onchange="ChangeDateSize(this.value)">
</asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="btnfront" runat="server" id="portraitBtn" style="margin: 0 auto; width: 100%;
margin-top: 5%; padding-bottom: 6px;">
<asp:Button ID="SaveCert" runat="server" CssClass="btn btn-primary navbar-btn" Text="Save Certificate"
OnClick="ConvertImgTopdf" UseSubmitBehavior="false" OnClientClick="return ConvertCert(this)" />
</div>
<div id="dvMessage" runat="server" visible="false" class="alert alert-danger" style="margin-bottom: 1%;
padding: 6px;">
<asp:Label ID="lblMessage" runat="server" Font-Size="9pt" />
</div>
</div>
<div class="col-sm-9" runat="server" id="section">
<asp:Image Class="imgfile" ID="imgfile" runat="server" ImageUrl="~/images/4.jpeg" />
<asp:Label ID="LabelName" runat="server" Text="Recipient Name"></asp:Label>
<asp:Label ID="LabelDate" runat="server" Text="Date"></asp:Label>
</div>
<asp:HiddenField ID="ImageDatahf" runat="server" />
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function selectFontAndApplyToEle(fontName, callback) {
$('div.font-select').find('.fs-results li').removeClass('active');
var dropEle = $('div.font-select').find('.fs-drop');
var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
dropEle.addClass('fs-drop-op');
var posFont = fontToSelect.offset().top
var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
$('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
fontToSelect.addClass('active').trigger('click');
setTimeout(function () {
$('div.font-select a div').trigger('click');
dropEle.removeClass('fs-drop-op');
callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
}, 500);
}
$(function () {
$('input.fonts').fontselect({
style: 'font-select',
placeholder: 'Select a font',
lookahead: 2
}).on('change', function (e) {
var fontFamily = $(this).val().replace(/\+/g, ' ');
$('#LabelName').css('font-family', fontFamily);
$('#LabelDate').css('font-family', fontFamily);
});
selectFontAndApplyToEle('Anton', function (fontFamily) {
$('#LabelName').css('font-family', fontFamily);
$('#LabelDate').css('font-family', fontFamily);
setTimeout(function () {
selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
$('#LabelName').css('font-family', fontFamily);
$('#LabelDate').css('font-family', fontFamily);
});
}, 1000);
});
});
});
</script>
<script type="text/javascript">
function NameSize(FontValue) {
document.getElementById("<%=LabelName.ClientID%>").style.fontSize = FontValue + 'pt';
}
function ChangeDateSize(FontValue) {
document.getElementById("<%=LabelDate.ClientID%>").style.fontSize = FontValue + 'pt';
}
</script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertCert(SaveCert) {
html2canvas($("#section")[0], { scale: 3 })
.then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=ImageDatahf]").val(base64);
__doPostBack(SaveCert.name, "");
});
}
</script>
</body>
</html>
C#
//This is when the Image is downloaded in it's normal format e.g. .png or .jpeg
protected void ExportToImage(object sender, EventArgs e)
{
string base64 = Request.Form[ImageDatahf.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
Response.Clear();
Response.ContentType = "image/png";
Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png");
Response.Buffer = true;
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.BinaryWrite(bytes);
Response.End();
}
//This is the code that it converts to PDF
protected void ConvertImgTopdf(object sender, EventArgs e)
{
string imagedata = ImageDatahf.Value;
string convert = imagedata.Replace("data:image/png;base64,", String.Empty);
byte[] imagebytes = Convert.FromBase64String(convert);
//Initialize the PDF document object.
using (Document pdfDoc = new Document())
{
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
pdfDoc.Open();
//Add the Image file to the PDF document object.
iTextSharp.text.Image img = iTextSharp.text.Image.GetInstance(imagebytes);
pdfDoc.Add(img);
pdfDoc.Close();
//Download the PDF file.
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment;filename=ImageExport.pdf");
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Write(pdfDoc);
Response.End();
}
}
