html2canvas截图丢失部分元素

html2canvas截图丢失部分元素

html2canvas截图丢失所选区域的部分元素

//这是我需要截取的元素

## 新的改变

//截取之后,图中会丢失一些模块
在这里插入图片描述
请问有哪位道友遇到过类似的问题???

相关代码

let targetDom = $('#outerLayoutPC');
let copyDom = targetDom.clone();
copyDom.width(targetDom.width() + 'px');
copyDom.height(targetDom.height() + 'px');
$('body').append(copyDom);
html2canvas(targetDom, {
    // allowTaint: true,
    taintTest: false,
    userCORS: true,
    onrendered: function (canvas) {
        document.body.appendChild(canvas);
        const Context = AuthToken.getICOPContext();
        canvas.id = 'mycanvas';
        //生成base64图片数据
        const dataUrl = canvas.toDataURL('image/png');
        //将base64图片数据转换为文件形式
        const file = dataURLtoFile(dataUrl, `${title}.png`);
        //声明FormData对象
        const formData = new FormData();
        //给FormData对象添加参数
        formData.append('files', file);
        formData.append('relationId', relationId);
        //添加请求的认证信息 -- 认证信息加到headers中
        const authority = `companyName=${encodeURI(Context.companyName)};_A_P_userLoginName=${Context._A_P_userLoginName};u_usercode=${Context.u_usercode};tenantid=${Context.tenantid};companyCode=${Context.companyCode};u_logints=${Context.u_logints};userId=${Context.userId};_A_P_userName=${encodeURI(Context._A_P_userName)};token=${Context.token};companyId=${Context.companyId};userType=${Context.userType}`;
        //发送上传图片请求
        $.ajax({
            url: LayoutUrl.UPLOAD_IMG,
            type: 'post',
            headers: {
                'icop-token': Context.token,
                'authority': authority
            },
            contentType: false, //必不可少
            processData: false, //必不可少
            data: formData//这里包括了所有表单的数据
        }).done(function (result) {
            // $('.layoutCardPage').parent().css({
            //     overflow: 'auto'
            // });
            $('body>.outerLayoutPC').remove();
            resolve();
        });
    }
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值