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

猿如意

已于 2023-06-28 15:36:31 修改

阅读量4.1k

点赞数 1

文章标签： html5 前端 html

于 2023-04-21 15:04:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37485170/article/details/130288342

版权

本文介绍了在开发过程中使用html2canvas截图遇到的问题及解决方案，包括如何处理截图不全（滚动条问题）、textarea换行显示和不支持省略号。通过设置延时、调整高度、转换为div+css以及js截取字符串长度动态添加省略号等方法，成功解决了这些问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：开发过程中截图保存图片用到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;
}