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