用html2canvas截图保存图片趟坑记录

前言：开发过程中截图保存图片用到html2canvas，但是呢，使用过程中也会趟坑。。。来说下趟过的坑

一、截图不全问题

• 开发中发发现有滚动条的情况下会截图不全，仅能展示出当前页面展示出来的内容，网上查找方法有人说在在生成截图前，先把滚动条置顶！！！然而试了并不好用，后来多方查找，找到方法：

1.给要截图的区域添加id

2.截图的时候添加一点点延时

3.height和windowHeight的区域显示设置id的区域

• htm代码实现过程：

<div id="mainBoxDisclosure">
<!-- 此处写要截图的内容-->
</div>
<button @click="handleConfirm">保存并预览</button>

• js代码实现过程：

  function handleConfirm() {
    setTimeout(() => {
      toCanvas();
    }, 300);
  }
  
  /**
   * @description: 转canvas
   */
  function toCanvas() {
    try {
      let targetDom = document.getElementById('mainBoxDisclosure');
      html2canvas(targetDom, {
        useCORS: true,
        allowTaint: true, // 这两个属性都是图片跨域相关属性
        scale: 2, //按比例增加分辨率 (2=双倍).
        dpi: window.devicePixelRatio * 2, //设备像素
        height: targetDom.scrollHeight,
        windowHeight: targetDom.scrollHeight
      })
        .then(canvas => {
          // canvas为转换后的Canvas对象
          let tempImg = new Image();
          tempImg.src = canvas.toDataURL(); // 导出图片
          //在此处拿到tempImg.src就是生成的base64图片，再进行后续业务逻辑处理
        })
        .catch(err => {
          console.log(err);
        });
    } catch (error) {}
  }

  注意：为了提高生成图片清晰度可以改变下面两个参数

• scale: 2, //按比例增加分辨率 (2=双倍).

• dpi: window.devicePixelRatio * 2, //设备像素

二、不支持textarea换行显示

本来是左侧图片信息，保存后就成了右侧这样，为了解决这个问题，就把编辑后生成的信息改成用div+css实现

 此处就直接写实现过程了:

<div class="textBlock">{
   
   {productItem.remark}}</div>
<style lang="scss" scoped>
.textBlock {
  max-width: 100%;
  height: auto;
  min-height: 100px;
  word-wrap:break-word;
  line-height: 1.5;
  vertical-align: bottom;
  background-color: $input-gray;
  border-radius: 8px;
  padding: 12px !important;
  margin-top: 10px;
  box-sizing: border-box;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-block;
  width: 100%;
  color: $title-color;
  font-size: 14px;
  border: none;
  transition: all 0.3s;
}
</style>

三、不支持省略号

解决方法就是: js控制字数，截取字数长度后，动态添加省略号

/**
 * @description: html2canvas不支持省略号
 * @param {string} str
 * @param {Number} len
 * @return {*}
 */
function cutString(str, len) {
  //length属性读出来的汉字长度为1
  if(str.length*2 <= len) {
    return str;
  }
  let strlen = 0;
  let s = "";
  for(let i = 0;i < str.length; i++) {
    s = s + str.charAt(i);
    if (str.charCodeAt(i) > 128) {
      strlen = strlen + 2;
      if(strlen >= len){
        return s.substring(0,s.length-1) + "...";
      }
    } else {
      strlen = strlen + 1;
      if(strlen >= len){
        return s.substring(0,s.length-2) + "...";
      }
    }
  }
  return s;
}