how to convert page in to image in asp.net

Question

I have tried like this

   protected void Page_Load(object sender, EventArgs e)
    {
        //saveURLToImage("http://localhost:2564/Pagetoimage.aspx?OrderId=7");
        saveURLToImage("http://www.w3schools.com/");

    }

    private void saveURLToImage(string url)
    {
        if (!string.IsNullOrEmpty(url))
        {
            string content = "";

            System.Net.WebRequest webRequest = WebRequest.Create(url);
            System.Net.WebResponse webResponse = webRequest.GetResponse();
            System.IO.StreamReader sr = new StreamReader(webResponse.GetResponseStream(), System.Text.Encoding.GetEncoding("UTF-8"));
            content = sr.ReadToEnd();
            //save to file
            byte[] b = Convert.FromBase64String(content);
            System.IO.MemoryStream ms = new System.IO.MemoryStream(b);
            System.Drawing.Image img = System.Drawing.Image.FromStream(ms);

            string folderPath = Server.MapPath("~/ImagesFolder/");  //Create a Folder in your Root directory on your solution.
            string fileName = "IMageName" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Minute + DateTime.Now.Second + ".jpg";
            string imagePath = folderPath + fileName;
            img.Save(imagePath, System.Drawing.Imaging.ImageFormat.Jpeg);

            img.Dispose();
            ms.Close();
        }
    }

but this error is coming

The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

please help me.

You're taking the HTML of a webpage, pretending it's a base64 string, converting that to a byte array, and then pretending that the byte array represents image data that can be converted to an image. That's really not going to work. You need something like one of the solutions mentioned [here](http://stackoverflow.com/questions/10721884/render-html-to-an-image). — mason, Apr 15 '16 at 13:22

score 0 · Accepted Answer · answered Apr 15 '16 at 10:36

0

You can make use of canvas in this. Add this script to you .aspx page

<script type="text/javascript">
            function ConvertToImage(btnExport) {
                html2canvas($("selector")[0]).then(function (canvas) {
                    var base64 = canvas.toDataURL();
                    $("[id*=hfImageData]").val(base64);
                    __doPostBack(btnExport.name, "");
                });
                return false;
            }
</script>

And cahnge your function to something like this

            string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
            byte[] bytes = Convert.FromBase64String(base64);
            System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes);
            System.Drawing.Image img = System.Drawing.Image.FromStream(ms);
            string folderPath = Server.MapPath("~/Images/");  //Create a Folder in your Root directory on your solution.
            string fileName = "IMageName" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Minute + DateTime.Now.Second + ".jpg";
            string imagePath = folderPath + fileName;
            img.Save(imagePath, System.Drawing.Imaging.ImageFormat.Png);

Add a button to your page on click of which you have to call this function and call the function ConvertToImage() on client click. And also add one hidden field like this:-

<asp:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false"
    OnClick="saveURLToImage" OnClientClick="return ConvertToImage(this)" />

Now when you click on the button it will save a image of the webpage on the server at the path specified. And you can change the jquery selector of which you want to capture image of. this solution uses jquery and canvas to make sure to import the libraries.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>

answered Apr 15 '16 at 10:36

Manish

4,692
3
29
41

hi, bro it is is not working I did all the changes please help me. – Prathap Apr 15 '16 at 12:35
After making changes what is the issue you are facing... like is it throwing some error? – Manish Apr 15 '16 at 13:36
it is working like that page only coming see this URL https://postimg.org/image/vgwmzis81/ – Prathap Apr 15 '16 at 13:53
i have one url i need to pass that one bro – Prathap Apr 15 '16 at 13:55
So what you need is that u have a url right and you want to take a snapshot of that page using that url.. without acrually loading that url.. correct me if i m wrong.. – Manish Apr 15 '16 at 14:29
correct bro or else if the same page also no problem if I run the page I need the screenshot without clicking button it's possible – Prathap Apr 15 '16 at 14:44
So what you can do is that... there is a trigger() function in jQuery. U can keep the button on page and use $(document).ready(). Use trigger to trigger the click event that u need not click it manually. As soon as page finishes loading it will trigger the click event and will give u the screenshot.. – Manish Apr 15 '16 at 15:04
hi, bro, I added one trigger it's working fine bro thank you very much for giving this kind of thought bro. – Prathap Apr 16 '16 at 11:05
U r welcome.. and if the answer resolved your problem you can mark it as an answer... – Manish Apr 16 '16 at 15:02
u will see a tick mark in front of the answer you have to click on that. for more details http://stackoverflow.com/help/someone-answers – Manish Apr 18 '16 at 08:19

how to convert page in to image in asp.net

1 Answers1