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里面,不能再块标签里,否则字会丢失


猜你喜欢

转载自blog.csdn.net/weixin_42119076/article/details/80855869