Use html2canvas screenshots to save picture pit records

Preface: During the development process, html2canvas is used to take screenshots and save pictures , but there will be pitfalls during use. . . Let's talk about the pit we went through

1. Incomplete screenshots

• During the development, if there is a scroll bar, the screenshot will be incomplete, and only the content displayed on the current page can be displayed. Some people say that the scroll bar should be set to the top before generating the screenshot! ! ! However, it was not easy to use after trying it. Later, I searched in many ways and found a method:

1. Add id to the area to be screenshot

2. Add a little delay when taking screenshots

3. The area of ​​height and windowHeight shows the area where the id is set

• htm code implementation process:

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

• js code implementation process:

  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) {}
  }

  Note: In order to improve the clarity of the generated image, the following two parameters can be changed

• scale: 2, //Increase the resolution proportionally (2=double).

• dpi: window.devicePixelRatio * 2, //device pixel

2. Textarea does not support newline display

Originally it was the image information on the left side, but after saving, it becomes like this on the right side. In order to solve this problem, the information generated after editing is changed to realize with div+css

 The implementation process is directly written here:

<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>

3. Ellipses are not supported

The solution is: js controls the number of words, after intercepting the length of the number of words, dynamically add an ellipsis

/**
 * @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;
}