將html轉化為canvas圖片（清晰度高）的方法

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,　　　　　　　　　　　　　

　　　　　　　　　　　　　　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(); }); });

<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 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"> <!--<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>

注：處理img生成canvas時如果不是本地圖片會有跨域問題，解決方法：

1、添加useCORS:true屬性；

2、給要生成canvas的DOM中包含的每一個<img>標簽添加crossorigin="anonymous"屬性；

3、確保你的圖片CDN服務器支持CORS訪問，也就是會返回Access-Control-Allow-Origin等響應頭；