canvas 截图插件 (截取html页面）

其中  capture 为要截取的 内容 （一个 class 或者一个ID 都可以）

down  为存放 src 的图片的 class  

放大三倍 是为了 图片更加清晰

	function img(){
                 //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
                 html2canvas(document.querySelector('#capture')).then(function(canvas) {
                 document.body.appendChild(canvas);
                
                 })
                  //创建一个新的canvas
                   var canvas2 = document.createElement("canvas");
                   let _canvas = document.querySelector('#capture');
                   var w = parseInt(window.getComputedStyle(_canvas).width);
                   var h = parseInt(window.getComputedStyle(_canvas).height);
                   //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
                   canvas2.width = w * 3;
                   canvas2.height = h * 3;
                   canvas2.style.width = w*3 + "px";
                   canvas2.style.height = h*3 + "px";
                   //可以按照自己的需求，对context的参数修改,translate指的是偏移量
                   //  var context = canvas.getContext("2d");
                   //  context.translate(0,0);
                   var context = canvas2.getContext("2d");
                   context.scale(3,3);
                   html2canvas(document.querySelector('#capture'),{canvas:canvas2}).then(function(canvas) {
                   document.body.appendChild(canvas);
                  //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
                   document.querySelector(".down").setAttribute('src',canvas.toDataURL());
                  });

              }