Capturing Webpage Screenshot with Html2Canvas.js(使用Html2Canvas生成网页快照)
2015-07-03 08:41
656 查看
转载自:http://www.ayobamiadewole.com/Blog/Capturing-Webpage-Screenshot-with-Html2Canvas
Introduction
Recently, I was to implement a web application requirement that stipulates that the screenshot of a web page containingform filled by users be captured, as the form is being submitted. While this may seems trivial, a lot of intricacies is involved in building an image representation of the page as it is shown on the browser.
Html2canvas.js
Html2canvas.js is a javascript library that provides functionality for capturing a screenshot, the screenshot isbuilt based on the information available on the page. The script traverses the DOM and builds a representation of the page alongside the images and the css styles present on the page, but it doesn’t render flash, java applets and iframe. The html2canvas library
can be downloaded here
The example in this blog post uses Asp.net MVC and it contains code to capture the screenshot and display the captured
image on the browser and upload the image to the controller action method for saving as a png file on the server.
Add reference to the required javascript libraries at the header of the page
<script src="~/Js/jquery-1.9.1.js"></script> <script src="~/Js/html2canvas.js"></script> <script src="~/Js/jquery.plugin.html2canvas.js"></script>
Below is the Razor and Html tags for the page
@using(Html.BeginForm("ScreenShot", "Home", FormMethod.Post, new { @id = "form" })) { <div class="designPane"> <br /> <br /> <p> Some text that would be captured as screenshot </p> </div> <div class="space"> </div> @Html.Hidden("capturedShot") <div> <input type="button" id="btnCapture" value="Capture" /> <input type="button" id="btnDisplay" value="View Image" /> </div> }
The javascript code for capturing the screenshot and displaying the captured image and that for uploading to the
server.
<script> $(document).ready(function () { $('#btnCapture').on("click", function () { captureAndUpload(); }); $('#btnDisplay').on("click", function () { captureAndDisplay(); }); function captureAndUpload() { $('body').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string) $('#capturedShot').val(canvas.toDataURL("image/png")); document.getElementById("form").submit(); } }); } function captureAndDisplay() { $('body').html2canvas({ onrendered: function (canvas) { var myImage = canvas.toDataURL("image/png"); window.open(myImage); } }); } }); </script>
The controller action method below accepts the uploaded screenshot and writes it to a file.
[HttpPost] public ActionResult ScreenShot(FormCollection formCollection) { string screenShot = formCollection["capturedShot"]; //remove the image header details string trimmedData = screenShot.Replace("data:image/png;base64,",""); //convert the base 64 string image to byte array byte[] uploadedImage=Convert.FromBase64String(trimmedData); //the byte array can be saved into database or on file system //saving the image on the server string fileName=Guid.NewGuid()+".png"; string path=Server.MapPath("~/App_Data/"+fileName); System.IO.File.WriteAllBytes(path,uploadedImage); return View(); }
相关文章推荐
- JavaScript学习12:事件对象
- 如何在sublime text运行javascript
- JSON构造和解析json-lib(一)
- H5 JS基本元素概要
- AJAX MVC 服务器返回Json数据,客户端获取Json数据
- JS 生成26个大小写字母
- js 3秒后自动跳转页面
- javascript生成大小写字母
- JavaScript中的对象与JSON
- JavaScript中解析JSON数据的三种方法
- JavaScript访问字符串中单个字符的两种方法
- Javascript中的作用域和上下文深入理解
- JavaScript定时器和优化的取消定时器方法
- JavaScript实现select添加option
- JavaScript获取表格(table)当前行的值、删除行、增加行
- Javascript实现字数统计
- javascript表格的渲染组件
- JSON相关知识汇总
- 使用jspdf生成pdf报表
- js实现防止被iframe的方法