使用html2canvas將dom生成圖片下載以及解決圖片清晰度

最近公司有個需求，實現html 頁面元素轉為png圖像,這邊用了html2canvas來實現.,這里記錄一下，避免以后忘了~~

官網鏈接: http://html2canvas.hertzen.com/

 

需求:

點擊按鈕希望將彈窗的窗口生成圖片並下載

思路:

1.頁面加載使用v-show 隱藏元素,在頁面初始化的時候,通過html2canvass將元素提前生成圖片

2.將生成好的圖片替換之前隱藏的元素

 

1.安裝html2canvas版本為1.3.2

npm install --save html2canvas

2.在頁面引用

點擊查看代碼

<template>
  <div style="width: 170px; height: 245px">
    <img
      crossorigin="anonymous"
      :src="shareImg"
      v-show="!!shareImg == true"
      style="width: 100%"
    />
    <div class="dialogP" ref="dowmloadCard" v-show="!!shareImg == false">
      <div style="position: relative">
        <div class="shareCard" ref="divImageRefs" id="divImageRef">
          <div style="width: 160px">
            <div
              class="knowlegeImage"
              :style="{
                backgroundImage: 'url(' + knowledge.imageUrl + ')',
                backgroundPosition: 'center',
                backgroundSize: '100% auto',
              }"
            >
              <!-- <img :src="knowledge.imageUrl" style="object-fit: cover" /> -->
            </div>
            <div class="modelUinfo">
              <div class="modelname">
                <div class="knowlegeName">{{ knowledge.knowledgeName }}</div>
                <div class="space-info">
                  <img :src="knowledge.authorInfo.avatar" class="header" />
                  {{ knowledge.space.spaceName }}
                </div>
              </div>

              <div style="height: 70px">
                <div
                  ref="shareKnowledgeQrcodeRef"
                  class="shareKnowledgeQrcode"
                ></div>
                <img src="@/assets/car.png" class="chichengLogo" />
                <div class="chichengLogo"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
 methods: {
 initImg(){
 (window.html2canvas || html2canvas)(canvasID, {
        // with: canvasID.offsetWidth,
        // height: canvasID.offsetHeight - 1,
        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
        scale: 10,
        X: 0,
        Y: 3,
        scrollX: 0, //如果左邊多個白邊 設置該偏移-3 或者更多
        scrollY: 0,
        backgroundColor: null,
        useCORS: true, //是否使用CORS從服務器加載圖像 !!!
        allowTaint: true, //是否允許跨域圖像污染畫布  !!!
        async: true,
      })
        .then((canvas) => {
        // 移動端采用圖片長按保存下載
          that.$parent.ifShowShareCard = false;
          let type = "image/jpg";
          let imgData = canvas.toDataURL(type);
          that.shareImg = imgData;
          // pc 采用自定義下載, 在這就不說了
        
        })
        .catch((res) => {});
 }
 }
}
</script>