把html页面转化成图片——html2canvas

时间：2023-03-09 16:12:08
把html页面转化成图片——html2canvas 
所有样式要用px！
所有样式要用px！
所有样式要用px！
所有样式要用px！
用rem，会导致错位
<div id="win" class="i-d-fenxiang fenxiang1">

                <img crossorigin="anonymous" class="i-d-fenxiang-pic" :src="fenxiang_pic" alt="">

                <div class="i-d-fenxiang-box">

                    <div class="i-d-fenxiang-info">

                        <div class="i-d-fenxiang-info-name">

                            <i v-if="type==1" class="iconfont iconxiangqing-tm"></i>

                            <i v-if="type==0" class="iconfont iconxiangqing-tb"></i>

                            <i v-if="isbaoyou" class="iconfont iconxiangqing-baoyou"></i>

                            {{name}}

                        </div>

                        <div class="i-d-fenxiang-price">现价：<span>￥{{yuan_price}}</span></div>

                        <div class="i-d-fenxiang-quan">

                            <div class="i-d-fenxiang-quan-left">

                                <div>券</div>

                                <div>{{quan}}</div>

                            </div>

                            <div class="i-d-fenxiang-quan-right">

                                券后价:<span>￥{{xian_price}}</span>

                            </div>

                        </div>

                    </div>

                    <div class="i-d-fenxiang-right">

                        <div class="i-d-fenxiang-qrcord">

                            <div class="i-d-fenxiang-qrcord-pic" id="qrcode"></div>

                        </div>

                        <div class="i-d-fenxiang-qrcord-text">长按保存图片</div>

                    </div>

                </div>

            </div>
// 打开分享弹窗

                openBanner: function () {

                    var that = this;

                    myApp.preloader.show();

                    that.isfenxiang = true;

                    $(".i-d-zhezhao").show();

                    // 绘制画布

                    var copyDom = document.querySelector('.fenxiang1');

                    var width = copyDom.offsetWidth;//dom宽

                    var height = copyDom.offsetHeight;//dom高

                    console.log(that.fenxiang_pic);

                    console.log(width);

                    console.log(height);

                    var scale = 2;//放大倍数

                    html2canvas(copyDom, {

                        dpi: window.devicePixelRatio * 2,

                        scale: scale,

                        width: width,

                        heigth: height,

                        useCORS: true

                    }).then(function (canvas) {

                        var dataURL = canvas.toDataURL();

                        console.log(dataURL);

                        that.canvas = dataURL.split(',')[1];

                        $(".i-d-canvas").attr('src', dataURL);

                        myApp.preloader.hide();

                        api.addEventListener({

                            name: 'longpress'

                        }, function (ret, err) {

                            ac5.open();

                        });

                    });

                },

相关文章