html2canvas转图片问题

在同一页面生成的时候，首先js执行的数据到DOM后生成页面，然后canvas才能生成，如果是纯前端，就要知道图片什么时候才能完全加载出来，否则执行canvas生成的时候是少图片的。canvas用的html2Canvas生成，用到img.onload判断。还有canvas生成的时候会有一条线，可能是背景图的原因，把背景图片换成img标签就OK了。深入的清晰度转化还有待研究，这里只是做了一个简单的生成图片的处理。

 

判断图片onload的封装函数，我这里是分开的两组图片判断，获取图片的总长度，和定义一个count，当count数组==length的时候执行canvas生成

var maxImg = 7, count = 0;
图片数组.forEach(function(item, index) {
    var src = item,
        img = new Image();
    img.index = index;
    img.onload = function() {//onload里面加载
        $('.peopleImg:eq(' + this.index + ')').attr('src', this.src);
        count ++;
        if(count >= maxImg) {
            generateCanvas();
        }
    }
    img.src = src;
})

 

function generateCanvas() {//canvas生成图片
    html2canvas(document.body).then(function(canvas) {
       //useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
       document.body.appendChild(canvas);//直接生成，但是页面和生成的图片会同时存在，有两种办法，一种把页面隐藏，一种给生成的图片定位到最高层级，把页面给覆盖掉，我这里用的第二种。
      //  var newimg =  convertCanvasToImage(canvas);
      //  newimg.setAttribute('width','100%');
      //  newimg.style.position = 'fixed';
      //  newimg.style.top = 0;
      //  newimg.style.left = 0;
      //  newimg.style.zIndex = 999;
      //  document.body.appendChild(newimg);
        
    });
}

//转图片

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

 

//这个是单独的数组判断，我这里没用到

function loadImage(imgList) {
   var len = imgList.length;
   var count = 0;
   imgList.forEach(function(item) {
      var img = new Image(item);
      $(..).attr('src', item);
      img.onload = function() {
         count++
        if(count === len) {
            return true
        }
     }
   })
}