H5页面（六）功能之截图-------html2canvas.js插件

前端开发一起交流QQ群：740034288

第一步：引入html2canvas.js插件：

 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

第二步：利用html2canvas.js生产图片：

   // TODO:生成海报动画

      html2canvas($('.page-haibao').get(0), {   //$('.page-haibao').get(0)相当于doucument.getEelementsByClassName

                                                                    // ("page-haibao")，该参数是以需要html2canvas以.page-haibao标签为

                                                                 //画布，该画图是.container下的设计图的宽高，

        useCORS: true
      }).then((canvas) => {        
        var dataURL = canvas.toDataURL('image/jpeg');     //保存 html2canvas生成图片的路径dataURL 。
        $('#haibao').attr('src', dataURL);                              //将图片保存在#haibao标签图片里面。
 
      })

案例：