Capture the screenshot of a webpage using html2canvas with png extension

问题

How to capture a screenshot of a webpage using html2canvas with png extension, and save it in a local folder?

I tried the following code. It saves the screenshot with the file name download but without a png/jpeg extension. Any way to make it work? I also want to save the screenshot to a local folder.

<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script> 
<script type="text/javascript">

    $(window).load(function(){

        $('#load').click(function(){

                html2canvas($('#testdiv'), {
                    onrendered: function (canvas) {
                        var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        window.location.href = img;
                    }
                });

        });
});

</script>       
</head>
<body>  
   <div id="testdiv">
          <h1>Testing</h1>
          <h4>One column:</h4>
            <table border="1">
            <tr>
              <td>100</td>
            </tr>
           </table>
       <br/> 
   </div>
   <input type="button" value="Save" id="load"/>
 </body>
</html>

回答1:

var save = document.createElement('a');
        save.href = data;
        save.target = '_blank';
        save.`enter code here`download = 'fileName';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);

回答2:

        $(window).load(function(){

            $('#load').click(function(){

                    html2canvas($('#testdiv'), {
                        onrendered: function (canvas) {
                            var img = canvas.toDataURL("image/png","image/octet-stream");
                            url = getImage(dataImage);
                            window.location.href = img;
                        }
                    });

            });
    });



function getImage(dataImage) {

    //var encodedData = window.btoa(html);
    var urls = '';
    var Data =
        {
            file: dataImage,

        }


    $.ajax({
        url: "/ColorMyTile/GetUserPatternImage",
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        async:false,
        //processData: false,

        data: JSON.stringify(Data),


        success: function (response) {


            urls = response;


        }
    });
    return urls;
}

---here is a c# code which convert the stream to image....

    [HttpPost]
    public JsonResult GetUserPatternImage(string file)
    {



        string dirPath = Server.MapPath("~//Images//EmailPattern//");

        string base64 = file.Substring(file.IndexOf(',') + 1);
        base64 = base64.Trim('\0');
        var length = base64.Length;
        byte[] data = Convert.FromBase64String(base64);
        UserPattern objPattern = new UserPattern();
        string imgSRC = "";

        string Alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        const int CharactersCount = 10;
        var rng = System.Security.Cryptography.RandomNumberGenerator.Create();
        byte[] buffer = new byte[4];
        char[] chars = new char[CharactersCount];
        //string[] charsColor = model.color.Split(',');
        //string[] charsID = model.ids.Split(',');


        for (int i = 0; i < chars.Length; i++)
        {
            rng.GetBytes(buffer);
            int nxt = BitConverter.ToInt32(buffer, 0);
            int index = nxt % Alphabet.Length;
            if (index < 0) index += Alphabet.Length;
            chars[i] = Alphabet[index];
        }
        string ImgName = new string(chars);

        using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64)))
        {
            using (Bitmap bm2 = new Bitmap(ms))
            {
                Color backColor = bm2.GetPixel(0, 0);
                bm2.MakeTransparent(backColor);
                imgSRC = dirPath + ImgName + ".jpg";
                bm2.Save(imgSRC);

            }
        }
        ImgName = ImgName + ".jpg";



        return Json(ImgName, JsonRequestBehavior.AllowGet);

    }

来源：https://stackoverflow.com/questions/21315051/capture-the-screenshot-of-a-webpage-using-html2canvas-with-png-extension

标签

javascript

jquery

html

screenshot

html2canvas