自己的笔记之canvas

canvas画图使用：www.html2canvas.cn/html2canvas…

依赖引入：

npm install html2canvas  
import html2canvas from 'html2canvas'

cdn引入：

      <script src="cancas线上地址"></script>

项目应用：

html：
      <div class="canvas" id="canvas">
              //这里放img标签主要是用于长按保存
              <img :src="canvasImageUrl" alt="" class="canvas-img" v-if="canvasImageUrl"/>
              <div class="other">放入其他内容</div>
      </div>
      
js:
        let canvasImageUrl = ''
        onMounted(() => {
          // 画布
          const capture = () => {
            let el = document.getElementById("canvas");
            let options = {
              width: el.offsetWidth,
              height: el.offsetHeight,
              useCORS: true, // 是否尝试使用 CORS 从服务器加载图像
              allowTaint: false, // 是否允许跨源图像污染画布
            };

            html2canvas(el, options).then((canvas) => {
              let imgData = canvas.toDataURL("image/jpeg"); // 转base64
              canvasImageUrl.value = imgData.replace(/(\r\n)|(\n)|(\r)/g, "");
            });
          };
          setTimeout(() => {
            capture();
          }, 500);
        });

css:
         #canvas {
           width: 100%;
           height: 100%;
           position: relative;
           .canvas-img{
                position:absolute;
                z-index: 20;
                top: 0;
                left: 0;
          }
          .other{
            pointer-events: none;
            position:absolute;
            z-index: 10;
            top: 0;
            left: 0;
             
          }
        }