移動端vue使用html2canvas的一些問題

1、業務需求：用戶投保時保存全頁面截圖

2、截圖插件：html2canvas

　　使用npm或yarn（可以使用淘寶鏡像）

npm install html2canvas
yarn add html2canvas

　　在需要的頁面引入html2canvas

import html2canvas from 'html2canvas'

　　直接上代碼

<div ref="imageTofile">
    <!-- 頁面內容 -->
</div>

<script>
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      ...
    }
  },
  methods: {
    // 全屏截圖
    imgDownload() {
      let _that = this;
      // 獲取需下載范圍元素
      let img = this.$refs.imageTofile;
      // 圖片高度
      var w = parseInt(window.getComputedStyle(img).width);
      // 圖片寬度
      var h = parseInt(window.getComputedStyle(img).height);

      // 聲明畫布寬高
      let canvas = document.createElement("canvas");
      canvas.width = w;
      canvas.height = h;
      canvas.style.width = w + "px";
      canvas.style.height = h + "px";
      // 利用 html2canvas 下載 canvas
      html2canvas(img, {
        canvas: canvas,
        useCORS: true, // 如果頁面有跨域的圖片，需要加上這個
        scrollY: 0
      }).then(function(canvas) {
        let photoUrl = canvas.toDataURL(); // base64圖片地址
        let conversions = _that.base64ToBlob(photoUrl, "image/png");
        window.URL = window.URL || window.webkitURL; // blob對象轉換為blob-url
        let url = window.URL.createObjectURL(conversions);
        console.log(url); // 圖片路徑 blob格式，主要是base64的圖片格式太長，防止瀏覽器的url長度限制。
      });
    },
    base64ToBlob(urlData, type) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1] || type;
      // 去掉url的頭，並轉化為byte
      let bytes = window.atob(arr[1]);
      // 處理異常,將ascii碼小於0的轉換為大於0
      let ab = new ArrayBuffer(bytes.length);
      // 生成視圖（直接針對內存）：8位無符號整數，長度1個字節
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], {
        type: mime
      });
    }
  }
}

</script>

  乍看一下好像沒啥問題，實際操作你會發現以下幾個問題

　　1、白屏，只截到一部分

　　

　　這個問題是頁面滾動的原因，導致截圖白屏，解決方案就是截圖之前跳到頂部

document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

　　2、頁面寬高比例導致的截圖只截了一部分

　　

　　這種情況是寬高比例的原因導致，解決方法是調整寬高的比例

// 聲明畫布寬高
let canvas = document.createElement("canvas");
canvas.width = w * 4; // 乘了一個倍率
canvas.height = h * 3.; // 乘了一個倍率
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// 可能跟html5canvas的canvas的初始大小有關，這個倍率跟實際頁面的寬高有關

我的頁面寬高是414*1946，具體是多少，需要去試。

 

如果大家有更好的方法，希望給我說一下