一直报错onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value!如下图
图片说明
使用html2canvas一直报错，有用过的大神指教一下吗
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
6条回答
- fangBlood 2018-10-12 03:43关注
js代码
$("#btn_upload4").click(function () { var filename = 1+ "_fansImages.pdf"; // 将 id 为 Modal5 的 div 渲染成 canvas html2canvas(document.getElementById("Modal5"), { // 渲染完成时调用，获得 canvas onrendered: function(canvas) { // 从 canvas 提取图片数据 var imgData = canvas.toDataURL('image/jpeg'); var canWidth = canvas.width; var canHeight = canvas.height; var arrDPI = js_getDPI();//获取显示器DPI var dpiX = 96; var dpiY = 96; if(arrDPI.length>0){ dpiX = arrDPI[0]; dpiY = arrDPI[1]; } // var doc = new jsPDF("p", "mm", "a4"); var doc = new jsPDF('', '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代码
<div class="modal fade" id="Modal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1050;"> <div class="modal-dialog modal-lg" > <div class="modal-content" style="width:1000px;margin-left:-5%" > <div class="modal-header" style="height:60px"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel" style="float:left ;">正太分析图</h4> <button type="button" class="btn btn-default" style="background-color:#337ab7;color:#fff;margin-top:3px;float:right" id="btn_upload4" >打印正太图</button> </div> <!--startprint--> <div class="modal-body"> <div class="ibox" > <div style="width:21%;height:40%; float:left; border:1px solid;margin-top:30px" > <p style="text-align: center;">Process Data</p></br> <div class="col-md-6">LSL:</div> <div class="col-md-6"><span id="lsl"></span></div> <div class="col-md-6">Target:</div> <div class="col-md-6"><span id="Target"></span></div> <div class="col-md-6">USL:</div> <div class="col-md-6"><span id="USL"></span></div> <div class="col-md-6">SampleM:</div> <div class="col-md-6"><span id="SM"></span></div> <div class="col-md-6">SampleN:</div> <div class="col-md-6"><span id="SampleN"></span></div> <div class="col-md-6">Within:</div> <div class="col-md-6"><span id="Within"></span></div> <div class="col-md-6">Overall:</div> <div class="col-md-6"><span id="Overall"></span></div> </div> <!-- echart图 --> <div id="main" style="width: 500px;height:300px;background-color: #ffffff;margin: 0 auto"></div> <div style="width: 22%;height:20% ; float:right;margin-top:-31%;"> <div style="border:1px solid;width:150px;height:50px"> <p>————With in</p> <p>—— ——Over all</p> </div> <div style="border:1px solid;width:200px;height:150px;margin-top:5px"> <p style="text-align: center;">Potential(Within)Capabilitys</p> <div class="col-md-6">Cp:</div> <div class="col-md-6"><span id="Cp"></span></div> <div class="col-md-6">CPL:</div> <div class="col-md-6"><span id="CPL"></span></div> <div class="col-md-6">CPU:</div> <div class="col-md-6"><span id="CPU"></span></div> <div class="col-md-6">CPK:</div> <div class="col-md-6"><span id="CPK"></span></div> <div class="col-md-6">CCPK:</div> <div class="col-md-6"><span id="CCPK"></span></div> </div> <div style="border:1px solid;width:200px;height:150px;"> <p style="text-align: center;">Overall Capability</p> <div class="col-md-6">Pp:</div> <div class="col-md-6"><span id="Pp"></span></div> <div class="col-md-6">PPL:</div> <div class="col-md-6"><span id="PPL"></span></div> <div class="col-md-6">PPU:</div> <div class="col-md-6"><span id="PPU"></span></div> <div class="col-md-6">PPK:</div> <div class="col-md-6"><span id="PPK"></span></div> <div class="col-md-6">CPM:</div> <div class="col-md-6"><span id="CPM"></span></div> </div> </div> <div class="content" style="width: 100%;height:20%;margin-top: 8%;"> <div id="right" style="border:1px solid;width:225px;height:130px;margin-top:5px"> <p style="text-align: center;">O bserv ed Performnance</p> <div class="col-md-6">PPM < LSL:</div> <div class="col-md-6" style="text-align:center"><span id="ppmlsl" ></span></div> <div class="col-md-6">PPM > USL:</div> <div class="col-md-6" style="text-align:center"><span id="ppmtotal" ></span></div> <div class="col-md-6">PPM Total:</div> <div class="col-md-6" style="text-align:center"><span id="ppmusl" ></span></div> </div> <div id="mid" style="border:1px solid;width:225px;height:130px;margin-top:5px;"> <p style="text-align: center;">Exp.Within Performance</p> <div class="col-md-6">PPM < LSL:</div> <div class="col-md-6" style="text-align:center"><span id="ppmlsls" ></span></div> <div class="col-md-6">PPM > USL:</div> <div class="col-md-6" style="text-align:center"><span id="ppmtotals" ></span></div> <div class="col-md-6">PPM Total:</div> <div class="col-md-6" style="text-align:center"><span id="ppmusls" ></span></div> </div> <div id="left" style="border:1px solid;width:225px;height:130px;margin-top:5px"> <p style="text-align: center;">Exp.Overall Performance</p> <div class="col-md-6">PPM < LSL:</div> <div class="col-md-6" style="text-align:center"><span id="ppmlsl1" ></span></div> <div class="col-md-6">PPM > USL:</div> <div class="col-md-6" style="text-align:center"><span id="ppmtotal1" ></span></div> <div class="col-md-6">PPM Total:</div> <div class="col-md-6" style="text-align:center"><span id="ppmusl1" ></span></div> </div> <div id="passTital" style="border:1px solid;width:165px;height:130px;margin-left:5px;margin-top:5px;float:left"> <p style="text-align: center;">Percent Of Pass</p > <div class="col-md-6">PASS:</div> <div class="col-md-6" style="text-align:center"><span id="pass" ></span></div> </div> </div> </div> </div> </div> <!--endprint--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报 分享
- 2018-10-12 02:48回答 6 已采纳 js代码 ``` $("#btn_upload4").click(function () { var filename = 1+ "_fansImages.pdf";
- 2022-05-10 14:29回答 2 已采纳 这个就是截显示在当前页面的部分的内容吧，滚动滚动条再出现的就截不到了，只是给当前网页页面截图
- 2021-12-24 22:16回答 2 已采纳 不要用then，没有渲染完成自然是黑屏，用onrendered回调
- 2020-12-13 20:19html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。 使用 html2canvas html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas： 在实际使用...
- 2021-06-21 15:20回答 1 已采纳 设个固定宽高，宽度100%，高度你按F12看一下现在是多少，直接设置成一样的值就行了
- 2022-07-29 09:48回答 1 已采纳 可能是你截屏时选取的盒子里面有个地方有背景色
- 2018-07-16 08:43回答 1 已采纳 I finally found the solution It is related to the php.ini setting I change PHP.ini configuration a
- 2023-05-18 15:09CodeLines3的博客 解决：添加config属性。
- 2022-05-08 10:46回答 2 已采纳 配置了高度，超出屏幕外的内容无法导出，可以设置全部显示内容后，执行导出再还原回原来的高度，电脑配置不行可以会出现闪动问题。示例可以参考下面的 TableExport
- 2015-07-09 15:55回答 1 已采纳 The following code: <html> <head> <style> canvas {
- 2021-10-12 15:42回答 2 已采纳 自己已解决
- 2022-08-05 16:50好 想 。的博客 关于 vue 中使用html2canvas 遇到报错（ Element is not attached to a Document）
- 2017-07-15 02:23回答 2 已采纳 I've found a solution to my problem. Difster got me headed down the right path with his link to a
- 2021-06-27 00:40weixin_39611174的博客 $(document).ready(function () {var canvas = document.createElement("canvas")canvas.width = 1400 // 最终图片宽度280px的2倍，以px为单位canvas.height = 1000 // 最终图片高度315px的2倍，以px为单位let opts ...
- 2020-03-03 17:06zhliwang的博客 html2canvas使用报错Attempting to parse an unsupported color function “” 开发中遇到一个很神奇的bug
- 没有解决我的问题, 去提问
悬赏问题
- ¥15 用matlab 实现通信仿真
- ¥15 按键修改电子时钟，C51单片机
- ¥60 Java中实现如何实现张量类，并用于图像处理(不运用其他科学计算库和图像处理库）)
- ¥20 5037端口被adb自己占了
- ¥15 python：excel数据写入多个对应word文档
- ¥60 全一数分解素因子和素数循环节位数
- ¥15 ffmpeg如何安装到虚拟环境
- ¥188 寻找能做王者评分提取的
- ¥15 matlab用simulink求解一个二阶微分方程，要求截图
- ¥30 乘子法解约束最优化问题的matlab代码文件，最好有matlab代码文件