本文主要是介绍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转图片问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
