Конвертировать содержимое тега Div в формат изображения

Question

Я стажер по программному обеспечению на asp.net.

Это мой тег div.

<div id="contentsDiv">
    <b>Write some thing</b>
    <br/><br>
    <img alt="Koala" src="Images/Koala.jpg" width="400" height="400" />
    <br< /><br>
    <i>Some thing means any thing </i>
</div>



<asp:Button ID="Export" runat="server" Text="Export" onclick="Export_Click" />

Теперь, при нажатии кнопки «Экспорт», я хочу преобразовать содержимое тега.в изображение и сохраните его в определенной папке.

Answer 1

Конвертировать html-контент в изображение - это не совсем просто ... но я думаю, что вы можете сделать это

 class Program
    {
         [STAThread]
        static void Main(string[] args)
        {

            var bmp = MakeScreenshot(@"<div><h1>Hello World</h1></div>");

            bmp.Save(@"c:\pdf\test.jpg");
        }


        public static Bitmap MakeScreenshot(string html)
        {
            // Load the webpage into a WebBrowser control
            WebBrowser wb = new WebBrowser();
            wb.Navigate("about:blank");
            if (wb.Document != null)
            {

                wb.Document.Write(html);

            }

            wb.DocumentText = html;

            wb.ScrollBarsEnabled = true;
            wb.ScriptErrorsSuppressed = true;
            //      wb.Navigate(this.Uri);
            while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


            // Set the size of the WebBrowser control
                // Take Screenshot of the web pages full width
                wb.Width = wb.Document.Body.ScrollRectangle.Width;
                // Take Screenshot of the web pages full height
                wb.Height = wb.Document.Body.ScrollRectangle.Height;

            if (wb.Height <= 0)
            {
                wb.Height = 768;
            }

            // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
            Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
            wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
            wb.Dispose();

            return bitmap;
        }
    }

Answer 2

Пожалуйста, дайте нам более подробную информацию о вашем веб-приложении и цели, которую вы хотите достичь. Вы, вероятно, имеете в виду экспорт на стороне клиента, но я не могу быть уверен на 100%.

Если это так, вы можете нарисовать этот div в элементе canvas, а затем использовать toDataURL объекта HTMLCanvasElement, чтобы разрешить сохранение пользователем содержимого браузера через закрытое содержимое div.

var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');

Когда пользователь нажимает «Экспорт», сделайте это:

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

Больше информации в Canvas tutorial и в этом блоге

Это довольно сложная задача для стажера по программному обеспечению:).