fangBlood
fangBlood
2018-10-12 02:48
采纳率: 77.8%
浏览 5.5k

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • fangBlood
    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">&times;</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 &lt LSL:</div>
                                                <div class="col-md-6" style="text-align:center"><span id="ppmlsl" ></span></div>
                                                <div class="col-md-6">PPM &gt 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 &lt LSL:</div>
                                                <div class="col-md-6" style="text-align:center"><span id="ppmlsls" ></span></div>
                                                <div class="col-md-6">PPM &gt 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 &lt LSL:</div>
                                                <div class="col-md-6" style="text-align:center"><span id="ppmlsl1" ></span></div>
                                                <div class="col-md-6">PPM &gt 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>
    
    点赞 评论
  • qq_35086097
    Stuild Stuil 2018-10-12 03:11

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

    点赞 评论
  • qq_35222232
    儿时可乖了 2018-10-12 06:43

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

    点赞 评论
  • qq_24384939
    bigPelican 2018-10-12 07:05

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

    点赞 评论
  • zt13502162671
    zt13502162671 2018-10-13 05:43

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

    点赞 评论
  • eclothy
    袁不 2019-04-08 14:44

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

    html2canvas(document.body,{ width:200,height:100 }).then(function(canvas){
            var imgUri = canvas.toDataURL();
            $("body").append('<a href="'+imgUri+'" download="下载的图片">保存图片</a>');
        });
    
    点赞 评论

相关推荐