Farnaz Bagheri
Farnaz Bagheri

Reputation: 61

Why does the browser block the content of javascript?

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

Answers (1)

Farnaz Bagheri
Farnaz Bagheri

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

Related Questions