篇一：html2canvas教程

//2016-02-18修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持 var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth; var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight; return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); return canvas; });

 主要是让用户调用时能够自定义需要截取Dom对象的宽和高，现在调用方式如下

$("#btn_screen").on("click", function () { html2canvas($("#tbl_exception"), { height: $("#tbl_exception").outerHeight() + 20, onrendered: function (canvas) { var url = canvas.toDataURL(); //以下代码为下载此图片功能 var triggerDownload = $(" a ").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body"); triggerDownload[0].click(); triggerDownload.remove(); });

 

通过前端插件即实现了浏览器全屏截图功能,不得不说H5功能越来越强大，下面将介绍mvc中的全局异常记录实现。

 

 

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的按钮。

如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的。

如果，想给予我更多的鼓励，求打

因为，我的写作热情也离不开您的肯定支持。

感谢您的阅读，如果您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是焰尾迭 。

篇二：html2canvas教程

插件描述：通过JS就能截屏，这是Html2canvas为用户提供的一个便捷的神器，通过对DOM元素的信息提取渲染页面。

工作原理

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。

换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。

这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

限制

所有的图片都需要在当前域下，这样Html2canvas才能不通过代理去读取到。同样地，如果你的页面上有其他的被跨域内容污染的canvas元素，html2canvas将不能准确渲染下来。

html2canvas不会渲染插件内容：Flash，Java组件，和iframe页面的内容。

所以，用户需要在特定的情况下来使用该插件，便能发挥很大的便利。

使用方法

html2canvas(element, options);

带有回掉函数的：

html2canvas(element, { onrendered: function(canvas) { // canvas 是最后一个渲染的 canvas  元素 }});

可用参数

NameTypeDefaultDescriptionallowTaintbooleanfalseWhether to allow cross-origin images to taint the canvasbackgroundstring#fffCanvas background color, if none is specified in DOM. Set undefined for transparentheightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.letterRenderingbooleanfalseWhether to render each letter seperately. Necessary ifletter-spacing is used.loggingbooleanfalseWhether to log events in the console.proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won t be loaded.taintTestbooleantrueWhether to test each image if it taints the canvas before drawing themtimeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.widthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.useCORSbooleanfalseWhether to attempt to load cross-origin images as CORS served, before reverting back to proxy PREVIOUS: NEXT:

篇三：html2canvas教程

 再来个书本上的五角星的例子

View Code

 

 

绘制图像 

绘图：context.drawImage

图像平铺：context.createPattern(image,type)

图像裁剪：context.clip()

像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)

绘图 context.drawImage

  context.drawImage(image,x,y)

  image:Image对象var img=new Image()(转自： 校 园生 活网:html2canvas教程); img.src= url(...)

  x:绘制图像的x坐标

  y:绘制图像的y坐标

  context.drawImage(image,x,y,w,h)

  image:Image对象var img=new Image(); img.src= url(...)

  x:绘制图像的x坐标

  y:绘制图像的y坐标

  w:绘制图像的宽度

  h:绘制图像的高度

  context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

 image:Image对象var img=new Image(); img.src= url(...)

  sx：图像上的x坐标

  sy：图像上的y坐标

  sw：矩形区域的宽度

  sh：矩形区域的高度

  dx：画在canvas的x坐标

  dy：画在canvas的y坐标

  dw：画出来的宽度

  dh：画出来的高度

 最后一个方法可能比较拗，还是上图吧

View Code

1 //drawImage(image,x,y) 2 function draw28(id) { 4 var image = new Image(); 6 image.src = Image/html5.jpg ; 7 var canvas = document.getElementById(id); 9 if (canvas == null)10 return false;11 var context = canvas.getContext( 2d );12 context.fillStyle = #EEEEFF ;14 context.fillRect(0, 0, 400, 300);15 image.onload = function () {16 context.drawImage(image,0,0);20 //drawImage(image,x,y,w,h)21 function draw12(id) {23 var image = new Image();25 image.src = Image/html5.jpg ;26 var canvas = document.getElementById(id);28 if (canvas == null)29 return false;30 var context = canvas.getContext( 2d );31 context.fillStyle = #EEEEFF ;33 context.fillRect(0, 0, 400, 300);34 image.onload = function () {35 context.drawImage(image, 50, 50, 300, 200);39 //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)40 function draw13(id){41 var image = new Image();42 image.src = Image/html5.jpg ;43 var canvas = document.getElementById(id);45 if (canvas == null)46 return false;47 var context = canvas.getContext( 2d );48 context.fillStyle = #EEEEFF ;50 context.fillRect(0, 0, 400, 300);51 image.onload = function () {52 context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸54 }