html2canvas截图的时候，dom元素设置为position absolute之后截取出的图片，此dom元素内容截取不到

Question

问题描述

html2canvas截图的时候，dom元素设置为position absolute之后截取出的图片，此dom元素内容截取不到

问题出现的环境背景及自己尝试过哪些方法

google没找到答案，但是确实去掉dom的position:absolute就可以截取出dom内容

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

   var copyDom = targetDom;
    copyDom.css(
        {
            'background-image':'url("./bg03.jpg")'
        }
    );
   /* $('body').append(copyDom);//把copy的截图对象追加到body后面*/
    var width = copyDom.offsetWidth;//dom宽
    var height = copyDom.offsetHeight;//dom高
    var scale = 2;//放大倍数
    var canvas = document.createElement('canvas');
    canvas.width = width*scale;//canvas宽度
    canvas.height = height*scale;//canvas高度
    var content = canvas.getContext("2d");
    content.scale(scale,scale);
    var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
    content.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
    html2canvas(copyDom[0], {
       /* allowTaint:true,
        useCORS:true,
        tainTest:true,*/
        scale:scale,
        canvas:canvas,
        width:width,
        heigth:height,
        }).then(function (canvas) {
    downloadImage(canvas.toDataURL(),'xxx.png')
});

Answer 1

html2canvas确实会出现这个问题，之前做的项目里面遇到过这个问题，需求是点击生成一个用户专属图片（多个图片，用户姓名，评测结果等信息），最后解决方法是自己写canvas解决（canvas尺寸最好是需求的2倍，然后缩小，不然在高分辨率手机上显示会模糊），仅供参考