// 引入htmlcanvas
import Vue from ‘vue‘;
import html2canvas from ‘html2canvas‘;
 
Vue.prototype.$html2canvas = html2canvas;

// 点击保存调用方法
handleSavePic(e) {
      this.bottomDialog = e
      const width = this.$refs[‘save-img‘].clientWidth
      const height = this.$refs[‘save-img‘].scrollHeight
      const self = this

      // 截图不全 备用滚动到顶部方案
      // window.pageYoffset = 0;
      // document.documentElement.scrollTop = 0;
      // document.body.scrollTop = 0;

      this.$html2canvas(this.$refs[‘save-img‘], {
        backgroundColor: ‘red‘,
        useCORS: true, 
       
        // 隐藏某个不像被截图的元素
        ignoreElements:(element)=>{
          if(element.id ===‘pirntHideButton‘)
          return true;
        },

        scale: 2,
        width,
        height,
        windowHeight: height,
        scrollX: 0,

        //移动端截图截不全的解决办法(不兼容ios)
        // scrollY: -window.scrollY
        scrollY: -document.documentElement.scrollTop
      }).then(canvas => {
        self.imgUrl = canvas.toDataURL();
    
        // console.log(self.imgUrl)
        self.downloadFile(‘download.png‘, self.imgUrl);
      });
    },
    
    // 下载图片
    downloadFile(fileName, content) {
    
　　　　 // 浏览器
        const aLink = document.createElement(‘a‘);
        const blob = this.base64ToBlob(content);
        const evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(new MouseEvent(‘click‘, { bubbles: true, cancelable: true, view: window }));
      
    },
    base64ToBlob(code) {
      const parts = code.split(‘;base64,‘);
      const contentType = parts[0].split(‘:‘)[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },