使用html2canvas对当前页面进行生成图片

来源:互联网 发布:化为简化阶梯型矩阵 编辑:程序博客网 时间:2024/04/26 07:03

1.需要导入jquery

2.导入(html2canvas.min.js)

代码如下:

function down(){  //l:横向, p:纵向; 单位: in:英寸,mm毫米;px:像素;  画布大小:默认是A4纸大小     // var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250      html2canvas($("#example-2"),{          height: 12000,           onrendered:function(canvas){              var imgData=canvas.toDataURL();             // pdf.addImage(imgData, 'JPEG', 5, 5, 225 , 235); //第3、4个参数是位置(x,y),第5、6个参数是宽,高               // pdf.save(new Date().getTime()+'.pdf');          }      }); }function down2(){   var str = $('#example-2');  //console.log(str);  html2canvas([str.get(0)], {    scale: 2,    onrendered: function (canvas) {          var image = canvas.toDataURL("image/png");          console.log(image);        var pHtml = "<img src="+image+" />";          $('#pic').html(pHtml);      }  });  //配合着vueJs<button v-on:click="greet">Greet</button><button onclick="down2()">ok</button><div id="pic">图片</div>