ankit.agg1984 Ответов: 4

Как захватить div в виде изображения с помощью c# asp.net-что?

Привет,

Как захватить div в виде изображения с помощью c# asp.net или jquer,javascript?

Пожалуйста, помогите мне.

заранее спасибо.

Анкит Агарвал
разработчик сайта

Sergey Alexandrovich Kryukov

Почему?
—СА

4 Ответов

Рейтинг:
2

JIYAUL MUSTAPHA 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="html2canvas.min.js"></script>
    <style type="text/css">
        .labans {
            /*	color:#990000;*/
            color: #336600;
            font-family: Verdana;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
        }

        .labans1 {
            /*	color:#990000;*/
            color: #000000;
            font-family: Verdana;
            font-size: 12px;
            font-weight: 600;
        }



        .divsection {
            border: 1px solid #DDD;
            padding: 8px 15px;
            spacing: 2px;
            border-radius: 8px;
            box-shadow: #EEEEEE 0.4em 0.0em 0.2em;
            background-image: url(../Images/Front.jpg);
            height: 15cm;
            width: 9.5cm;
            background-size: 358px;
            background-position: center top;
            background-repeat: no-repeat;
            object-fit: fill;
        }
    </style>
    <title></title>
    <!--ForExport data in iamge -->
    <script type="text/javascript">
        function ConvertToImage(btnExport) {
            html2canvas($("#dvContent")[0]).then(function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            });
            return false;
        }
    </script>
    <!--ForExport data in iamge -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script src="../data/assets/js/html2canvas.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">

        <div class="row" id="divhiddenInfo" runat="server" style="display: none">
            <div class="col-lg-2">
                <asp:HiddenField ID="lblCode" runat="server" />

            </div>
        </div>
        <asp:Button ID="btnDownload" Text="Download Front" runat="server" UseSubmitBehavior="false"
            OnClick="DownloadImage" OnClientClick="return ConvertToImage(this)" />

        <div id="dvContent" class="divsection">
            <asp:HiddenField ID="hfImageData" runat="server" />
            <table width="100%">
                <tr>

                    <td valign="Right">
                        <table width="88%">

                            <tr>
                                <td class="style43">
                                    <br />
                                    <asp:Image ID="Image1" runat="server" Height="155px" Width="129px" ImageAlign="Right" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="lblCategory" runat="server" CssClass="labans"></asp:Label>

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    <asp:Label ID="lblCity" runat="server" CssClass="labans"></asp:Label>

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    <asp:Label ID="lbllocation" runat="server" CssClass="labans"></asp:Label>

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>



            </table>

        </div>

    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


protected void DownloadImage(object sender, EventArgs e)
    {
        string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
        byte[] bytes = Convert.FromBase64String(base64);
        Response.Clear();
        Response.ContentType = "image/jpeg";
        Response.AddHeader("Content-Disposition", "attachment; filename=Front.jpeg");
        Response.Buffer = true;
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.BinaryWrite(bytes);
        Response.End();
    }

Nelek

Вы поняли, что этот вопрос относится к 2013 году?

Рейтинг:
1

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Ссылаться- Преобразование HTML-элемента управления (Div или таблицы) в изображение с помощью языка C#[^].

Вы также можете использовать библиотеку .NET Скриншот Веб-Сайтов[^].

Рейтинг:
1

thatraja

3 варианта здесь, проверьте это
Сделайте снимок экрана веб-страницы с помощью HTML5 и jQuery[^]

Рейтинг:
0

Ashraf Sada

Проверьте это решение, используя jQuery в качестве примера:
div к изображению

Код jQuery таков:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});