移动端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、白屏,只截到一部分

  移动端vue使用html2canvas的一些问题

  这个问题是页面滚动的原因,导致截图白屏,解决方案就是截图之前跳到顶部

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

  2、页面宽高比例导致的截图只截了一部分

  移动端vue使用html2canvas的一些问题

  这种情况是宽高比例的原因导致,解决方法是调整宽高的比例

// 声明画布宽高
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,具体是多少,需要去试。

 

如果大家有更好的方法,希望给我说一下

  

  

移动端vue使用html2canvas的一些问题

上一篇:ios签名app稳定不掉签技术详细教程详解


下一篇:基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目