Reputation: 61
I have an image component on my asp.net website and I put them in the exact location with css.. I want to save all in one image and after some digging i found a solution of getting screen shot of that by html2canvas... it works fine and the problem is that after uploading on the server the browser will block the content of html2canvas function and i dont know why? the canvas function actualy pass the canvas to server and save it as one image to database but i cannot solve the blocking and after adding exception for that page only it works fine.. but i want the user directly access the page without any popup page which need permision or saying that this site is not authorise... as i know html2canvas is a free licensed library and doesnt need any license.. here is my code for images:
<div id="imageBody">
<asp:Image ImageUrl="img/bgA4.png" height="364" width="216" runat="server" ID="img1" />
<asp:Image ImageUrl="img/darAghabChap/default.png" id="imgdarAghabChap" runat="server" />
<asp:Image ImageUrl="img/darAghabRast/default.png" id="imgdarAghabRast" runat="server" />
<asp:Image ImageUrl="img/darJeloChap/default.png" id="imgdarJeloChap" runat="server" />
<asp:Image ImageUrl="img/darJeloRast/default.png" id="imgdarJeloRast" runat="server" />
<asp:Image ImageUrl="img/gelgirAghabChap/default.png" id="imggelgirAghabChap" runat="server" />
<asp:Image ImageUrl="img/gelgirAghabRast/default.png" id="imggelgirAghabRast" runat="server" />
<asp:Image ImageUrl="img/gelgirJeloChap/default.png" id="imggelgirJeloChap" runat="server" />
<asp:Image ImageUrl="img/gelgirJeloRast/default.png" id="imggelgirJeloRast" runat="server" />
<asp:Image ImageUrl="img/kapoot/default.png" id="imgkapoot" runat="server" />
<asp:Image ImageUrl="img/separJelo/default.png" id="imgseparJelo" runat="server" />
<asp:Image ImageUrl="img/separJeloChap/default.png" id="imgseparJeloChap" runat="server" />
<asp:Image ImageUrl="img/separJeloRast/default.png" id="imgseparJeloRast" runat="server" />
<asp:Image ImageUrl="img/saghf/default.png" id="imgsaghf" runat="server"/>
<asp:Image ImageUrl="img/sandogh/default.png" id="imgsandogh" runat="server" />
<asp:Image ImageUrl="img/separAghab/default.png" id="imgseparAghab" runat="server"/>
<asp:Image ImageUrl="img/separAghabChap/default.png" id="imgseparAghabChap" runat="server"/>
<asp:Image ImageUrl="img/separAghabRast/default.png" id="imgseparAghabRast" runat="server"/>
</div>
html2canvas function:
<script type="text/javascript">
function ConvertToImage(btnExport) {
html2canvas($("#imageBody")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnExport.name, "");
});
return false;
}
and this is code behind which make the canvas save to database :
Protected Sub ExportToImage(sender As Object, e As EventArgs)
' vehBodyId = 25
If Session("UserId") = "" Then
Response.Redirect("~/Default.aspx")
Else
vehBodyId = idMaker("select max(vehBodyId) from VehicleBody", "vehBody")
Session("vehBodyId") = vehBodyId
Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(",")(1)
Dim bytes As Byte() = Convert.FromBase64String(base64)
'insert to db
sql = "insert into VehicleBody (vehBodyId,imgBody) values(@vehBodyId,@imgBody)"
If con.State = ConnectionState.Closed Then
con.ConnectionString = constr
con.Open()
End If
cmd.CommandText = sql
cmd.Parameters.Clear()
cmd.Parameters.Add("@vehBodyId", SqlDbType.Int).Value = vehBodyId
cmd.Parameters.Add("@imgBody", SqlDbType.Image).Value = bytes
cmd.CommandType = CommandType.Text
cmd.Connection = con
cmd.ExecuteNonQuery()
con.Close()
btnShowReport.Enabled = True
End If
Upvotes: 0
Views: 260
Reputation: 61
i finally found out why html2canvas wasnt work on ssl certificate and i just want to share if any one has same problem... that is because i linked to the jquery and html2canvas... i download them and linked from my server and it works correctly
Upvotes: 0