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元素中，然后使用HTMLCanvasElement对象的toDataURL允许用户通过浏览器“关闭”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和this blog

中的更多信息

软件培训生的任务非常困难：）。

将Div标签的内容转换为图像格式

2 个答案: