标签：canvas dataURL log copyDom var html 清晰度 console

var copyDom = document.querySelector('.fenxiang1');
                    var width = copyDom.offsetWidth;//dom宽
                    var height = copyDom.offsetHeight;//dom高
                    console.log(JSON.stringify(copyDom));
                    console.log(width);
                    console.log(height);

                    var scale = 2;//放大倍数
                    html2canvas(copyDom, {
                        dpi: window.devicePixelRatio * 2,
                        scale: scale,
                        width: width,
                        heigth: height,
                    }).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();
                        });
                    });

<div class="i-d-fenxiang-canvas" v-if="isfenxiang">
                <div class="i-d-fenxiang-close" @click="closeBanner"><i class="iconfont iconguanbi"></i></div>
//要放canvas的img

<img class="i-d-canvas" src=""> </div>

//要转化的弹窗开始
<!--分享弹窗开始-->
            <div id="win" class="i-d-fenxiang fenxiang1">
                <img 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">
                            <!--<img class="i-d-fenxiang-qrcord-pic" :src="erweima" alt="">-->
                            <div class="i-d-fenxiang-qrcord-pic" id="qrcode"></div>
                        </div>
                        <div class="i-d-fenxiang-qrcord-text">长按保存图片</div>
                        <!--<button class="i-d-fenxiang-qrcord-btn">复制文案-->
                        <!--</button>-->
                    </div>
                </div>
            </div>
            <!--分享弹窗结束-->

用到的js: 

<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

标签：canvas,dataURL,log,copyDom,var,html,清晰度,console
来源： https://www.cnblogs.com/shark1100913/p/11003231.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。