1. 程式人生 > >html 轉cavans

html 轉cavans

貼程式碼
<div class="back_code" id="back_code" style="height: 503.37px;">
            <p class="code_newt">dhdfhgjghjkgh</p>
            <div class="code_newc">
                <div class="code_newqr">
                    <p class="codeqr_num"><span>1</span></p>
                    <p class="codeqr_text">dfhfghfgjhg<br>dfhfghfgjhgj</p>
                </div>
                <div class="code_newqr">
                    <p class="codeqr_num"><span>2</span></p>
                    <p class="codeqr_text">sfdfdfgdfh<br>gfdhghfghg</p>
                </div>
            </div>
            <div class="code_outer">
                <div class="code_newtext">
<div class="code_texts code_textbasic code_texts_small">
<p class="ntext_num"><span></span><span class="ntext_org">sdfdfg<b>6</b>個</span></p>
<p class="ntext_t">
   <span>dfgdfgdfhfgjghk</span>
</p>
</div>
<div class="code_texts code_texplain code_texts_small">
                        <p class="code_explan">fgjgjghkjhbhmjhkh<br>ghkhjkhjljkljk</p>
                    </div>
                </div>
            </div>
            <div class="code_newbottom">
                <!-- <div class="code_newlogo">
                    <img src="/member/static/images/logo.png">
                </div> -->
                <div class="code_newb">
                    <div class="code_new_name" style="width: 58%; font-size: 1.35em; line-height: 41px;">
                        <p class="code_nname">西安雁塔西斜路西</p>
                    </div>

                    <div class="code_new_star" style="">
                        <div class="new_star">
                            <div class="new_stars" style="width:73.4%"></div>
                        </div>
                        <p>zzzzzz</p>
                    </div>
                </div>
            </div>
</div>
<button class="cavans" style="padding:1em 2em;font-size: 1.25em;">click</button>

        <script type="text/javascript">
            $(function(){
                $(".cavans").on("click",function(){
                    $('#back_code1').remove();
                    $('#cavasimg').remove();
                    var TargetNode = document.querySelector("#back_code")
                    //獲取節點高度,後面為克隆節點設定高度。
                    var height = $(TargetNode).height()
                    var width = $(TargetNode).width()
                    //克隆節點,預設為false,不復制方法屬性,為true是全部複製。
                    var cloneDom = $(TargetNode).clone(true);
                    //設定克隆節點的css屬性,因為之前的層級為0,我們只需要比被克隆的節點層級低即可。
                    cloneDom.css({
                        "position": "absolute",
                        "top": "0px",
                        "z-index": "-1",
                        "height": height
                    });
                    cloneDom.css('width',width+'px').css('height',height+'px');
                    cloneDom.attr('id','back_code1');
                    $("body").append(cloneDom);
                    //將克隆節點動態追加到body後面。
                    html2canvas(document.querySelector("#back_code1"), {taintTest:false,useCORS:true,}).then(function(canvas) {
                        canvas.id = "cavasimg";  
                        document.body.appendChild(canvas);  
                        $("#back_code1").remove();
                        //cavas 儲存圖片到本地  js 實現
                        //------------------------------------------------------------------------
                        //1.確定圖片的型別  獲取到的圖片格式 data:image/Png;base64,...... 
                        // var type ='jpeg';//你想要什麼圖片格式 就選什麼吧
                        var d=document.getElementById("cavasimg");
                        var imgdata=d.toDataURL('jpeg', '0.99');
                        // var imgdata=d.toDataURL(type);
                       download(imgdata,code_nname+'QR.jpeg');

                    });
                })
            })

        </script>


注:下面是儲存圖片  需要下載download.js
ios上轉圖片必須在span裡面,不能再塊標籤裡,否則字會丟失