// 引入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 });
    },               

constwidth=this.$refs['save-img'].clientWidth constheight=this.$refs['save-img'].scrollHeight constself=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') returntrue; }, scale:2, width, height, windowHeight:height, scrollX:0, //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){ try{ MokkayaAndroid.saveEncodingImageToGallery(content,'mlm','mlm') }catch(error){ constaLink=document.createElement('a'); constblob=this.base64ToBlob(content); constevt=document.createEvent("HTMLEvents"); evt.initEvent("click",true,true); aLink.download=fileName; aLink.href=URL.createObjectURL(blob); aLink.dispatchEvent(newMouseEvent('click',{bubbles:true,cancelable:true,view:window})); } }, base64ToBlob(code){ constparts=code.split(';base64,'); constcontentType=parts[0].split(':')[1]; constraw=window.atob(parts[1]); constrawLength=raw.length; constuInt8Array=newUint8Array(rawLength); for(leti=0;i<rawLength;++i){ uInt8Array[i]=raw.charCodeAt(i); } returnnewBlob([uInt8Array],{type:contentType}); },