html2canvas スクリーンショットを使用してピクチャ ピット レコードを保存する

はじめに: 開発プロセスでは、スクリーンショットを撮ったり、写真を保存したりするためにhtml2canvasが使用されますが、使用中に落とし穴があります。。。私たちが通った穴について話しましょう

1. 不完全なスクリーンショット

• 開発中、スクロールバーがあるとスクリーンショットが不完全になり、現在のページに表示されている内容しか表示されないため、スクリーンショットを生成する前にスクロールバーを一番上に設定すべきだという人もいます。！！しかし、実際に使ってみると使いにくく、その後色々調べたところ、次のような方法を見つけました。

1.スクリーンショットを取得する領域にID を追加します

2.スクリーンショットを撮るときに少し遅延を追加します

3.heightとwindowHeightの領域はidが設定されている領域を示します

• HTML コードの実装プロセス:

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

  注: 生成された画像の鮮明さを向上させるために、次の 2 つのパラメーターを変更できます。

• scale: 2, //解像度を比例的に増加します (2=2 倍)。

• dpi: window.devicePixelRatio * 2, //デバイスのピクセル

2. テキストエリアの改行表示はサポートされていません

元々は左側の画像情報だったのですが、保存すると右側のようになりました この問題を解決するために、編集後に生成される情報を 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>

3. 省略記号はサポートされていません

解決策は、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;
}