使用html2canvas一直报错,有用过的大神指教一下吗 ?报错-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

使用html2canvas一直报错,有用过的大神指教一下吗 ?报错

爱吃鱼的程序员 2020-06-24 13:36:35 148

一直报错onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value!如下图
图片说明

前端开发
分享到
取消 提交回答
全部回答(1)
  • 爱吃鱼的程序员
    2020-06-24 13:36:51

    js代码

    $("#btn_upload4").click(function(){varfilename=1+"_fansImages.pdf";//将id为Modal5的div渲染成canvashtml2canvas(document.getElementById("Modal5"),{//渲染完成时调用,获得canvasonrendered:function(canvas){//从canvas提取图片数据varimgData=canvas.toDataURL('image/jpeg');varcanWidth=canvas.width;varcanHeight=canvas.height;vararrDPI=js_getDPI();//获取显示器DPIvardpiX=96;vardpiY=96;if(arrDPI.length>0){dpiX=arrDPI[0];dpiY=arrDPI[1];}//vardoc=newjsPDF("p","mm","a4");vardoc=newjsPDF('','in',[(canWidth+10)/dpiX,(canHeight+10)/dpiY]);//设置PDF宽高为要显示的元素的宽高,将像素转化为英寸//doc.addImage(imgData,'JPEG',0,0,210,297);doc.addImage(imgData,'JPEG',0,0,0,0);doc.save(filename);},background:"#f7f7f7"//设置PDF背景色(默认透明,实际显示为黑色)});})

    html代码

    <divclass="modalfade"id="Modal5"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"style="z-index:1050;"><divclass="modal-dialogmodal-lg"><divclass="modal-content"style="width:1000px;margin-left:-5%"><divclass="modal-header"style="height:60px"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h4class="modal-title"id="myModalLabel"style="float:left;">正太分析图</h4><buttontype="button"class="btnbtn-default"style="background-color:#337ab7;color:#fff;margin-top:3px;float:right"id="btn_upload4">打印正太图</button></div><!--startprint--><divclass="modal-body"><divclass="ibox"><divstyle="width:21%;height:40%;float:left;border:1pxsolid;margin-top:30px"><pstyle="text-align:center;">ProcessData</p></br><divclass="col-md-6">LSL:</div><divclass="col-md-6"><spanid="lsl"></span></div><divclass="col-md-6">Target:</div><divclass="col-md-6"><spanid="Target"></span></div><divclass="col-md-6">USL:</div><divclass="col-md-6"><spanid="USL"></span></div><divclass="col-md-6">SampleM:</div><divclass="col-md-6"><spanid="SM"></span></div><divclass="col-md-6">SampleN:</div><divclass="col-md-6"><spanid="SampleN"></span></div><divclass="col-md-6">Within:</div><divclass="col-md-6"><spanid="Within"></span></div><divclass="col-md-6">Overall:</div><divclass="col-md-6"><spanid="Overall"></span></div></div><!--echart图--><divid="main"style="width:500px;height:300px;background-color:#ffffff;margin:0auto"></div><divstyle="width:22%;height:20%;float:right;margin-top:-31%;"><divstyle="border:1pxsolid;width:150px;height:50px"><p>————Within</p><p>————Overall</p></div><divstyle="border:1pxsolid;width:200px;height:150px;margin-top:5px"><pstyle="text-align:center;">Potential(Within)Capabilitys</p><divclass="col-md-6">Cp:</div><divclass="col-md-6"><spanid="Cp"></span></div><divclass="col-md-6">CPL:</div><divclass="col-md-6"><spanid="CPL"></span></div><divclass="col-md-6">CPU:</div><divclass="col-md-6"><spanid="CPU"></span></div><divclass="col-md-6">CPK:</div><divclass="col-md-6"><spanid="CPK"></span></div><divclass="col-md-6">CCPK:</div><divclass="col-md-6"><spanid="CCPK"></span></div></div><divstyle="border:1pxsolid;width:200px;height:150px;"><pstyle="text-align:center;">OverallCapability</p><divclass="col-md-6">Pp:</div><divclass="col-md-6"><spanid="Pp"></span></div><divclass="col-md-6">PPL:</div><divclass="col-md-6"><spanid="PPL"></span></div><divclass="col-md-6">PPU:</div><divclass="col-md-6"><spanid="PPU"></span></div><divclass="col-md-6">PPK:</div><divclass="col-md-6"><spanid="PPK"></span></div><divclass="col-md-6">CPM:</div><divclass="col-md-6"><spanid="CPM"></span></div></div></div><divclass="content"style="width:100%;height:20%;margin-top:8%;"><divid="right"style="border:1pxsolid;width:225px;height:130px;margin-top:5px"><pstyle="text-align:center;">ObservedPerformnance</p><divclass="col-md-6">PPM&ltLSL:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmlsl"></span></div><divclass="col-md-6">PPM&gtUSL:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmtotal"></span></div><divclass="col-md-6">PPMTotal:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmusl"></span></div></div><divid="mid"style="border:1pxsolid;width:225px;height:130px;margin-top:5px;"><pstyle="text-align:center;">Exp.WithinPerformance</p><divclass="col-md-6">PPM&ltLSL:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmlsls"></span></div><divclass="col-md-6">PPM&gtUSL:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmtotals"></span></div><divclass="col-md-6">PPMTotal:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmusls"></span></div></div><divid="left"style="border:1pxsolid;width:225px;height:130px;margin-top:5px"><pstyle="text-align:center;">Exp.OverallPerformance</p><divclass="col-md-6">PPM&ltLSL:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmlsl1"></span></div><divclass="col-md-6">PPM&gtUSL:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmtotal1"></span></div><divclass="col-md-6">PPMTotal:</div><divclass="col-md-6"style="text-align:center"><spanid="ppmusl1"></span></div></div><divid="passTital"style="border:1pxsolid;width:165px;height:130px;margin-left:5px;margin-top:5px;float:left"><pstyle="text-align:center;">PercentOfPass</p><divclass="col-md-6">PASS:</div><divclass="col-md-6"style="text-align:center"><spanid="pass"></span></div></div></div></div></div></div><!--endprint--><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button></div></div><!--/.modal-content--></div><!--/.modal--></div>

    你把代码贴一下,前端和后台的

    你是要把DIV保存为图片对吗?

    重新下一份源码,估计是源码有问题

    好像如果ie的话jspdf会抛错的

    最新的html2canvas已经弃用了onrendered,改成以下代码:

    html2canvas(document.body,{width:200,height:100}).then(function(canvas){varimgUri=canvas.toDataURL();$("body").append('<adownload="下载的图片">保存图片</a>');});
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程