PDF.js 加载文档，实现任意位置当前可视范围截图下载

关于前端页面转成图片格式的方法，网上已经有很多了，div转图片我一般用html2canvas.js引用调用就能返回Base64格式的串，

canvas转成图

片直接用canvas.toDataURL()f方法转换。但是项目上要求一个很奇葩的需求，无论是div或者是canvas转成图片都必须是一个完整的dom元素对象。项目上PDF文档用的PDF.js做展示渲染需要一个截图功能要求在文档的任意位置截取可视范围的内容输出成一个图片类似于浏览器的截图。当时我就呵呵了，PDf.js的渲染方式每一页都是一个canvas，一页一页的转换我是OK的，这要是任意位置就可能包括屏幕中展示两页的中间位置，包括上一页的下半部分和这页的下半部分。简而言之就是两个一半的canvas，都不是一个完整的dom元素。这种截图一看就是浏览器和桌面端实现的功能，这一半的dom元素咋整。可能是我水平不够这种从技术上已经实现不了。经过苦思冥想，神游天地，探索宇宙的真知，找寻存在的价值。终于想到一个解决的方法实现这个功能。看到这也累了吧，废话就不说了。

实现方式：

技术上实现不了，只能取巧实现，主要实现方法，获取当前屏幕下展示的页,每个页都是一个完整的canvas，把canvas.toDataURL()方法转成图片，新建一个新的canvas把每页的图片按照原来的位置摆放在新的canvas上，打印新的canvas。

效果如图

代码：

/**
* 功能：截图实现类
* 描述：实现PDF.js下在任意位置下能够输出当前屏幕范围下的图片
* 日期：2018/8/6
*兼容性：ie9+ 支持H5的浏览器
*
**/
var PrinterPicture = (function () {

    //构造函数传入
    function PrinterPicture(callback) {
      //获取当前可视页面
        this.viewPage=PDFViewerApplication.pdfViewer._getVisiblePages();
        this.callback=this.viewPage.views.length
        //创建新canvas
        this.newcanvas = document.createElement('canvas');
         this.newcanvas.height=document.body.clientHeight-32;
        this.newcanvas.width=document.body.clientWidth;
        var ctx=this.newcanvas.getContext("2d")
        ctx.fillStyle ="#404040"
        ctx.fillRect(0,0,this.newcanvas.width,this.newcanvas.height)
        this.allCanvasToPic(0, callback)
    }

/**
* @function:将可见页的canvas转换成图片
* @param：{Number} i 递归
* @return ：无
**/
    PrinterPicture.prototype.allCanvasToPic = function (i, callback) {
      var canvas=document.getElementById("page"+this.viewPage.views[i].id+"")
      var image = new Image();
      image.height=canvas.height;
      image.width=canvas.width;
       image.src = canvas.toDataURL("image/png");
            image.onload=function(){
             this.InterceptPic(image,this.newcanvas,this.viewPage.views[i].id)
             if(i

第一篇文章献给大家，如有错误欢迎指教。