html2canvas转图片问题

本文主要是介绍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
        }
     }
   })
}

 

 

 

 

这篇关于html2canvas转图片问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---