使用html2canvas截取固定区域的图

1.安装

npm i html2canvas

2.引入

import html2canvas from "html2canvas"

3.使用

===>html

<div   class="content"  style="width: 200px; height: 200px; background-color: pink"   id="imgPannel" >

  <p>这是想要截图的内容 这是想要截图的内容</p>

 <p>这是想要截图的内容 这是想要截图的内容</p>

</div>

 <div style="width: 100px; height: 100px; background-color: blue" @click="describe" >保存</div>

js====>

methods: {

html2canvas(document.querySelector("#imgPannel"), {

      allowTaint: true,//是否允许跨域图像

      useCORS: true,//是否尝试使用CORS从服务器加载图像

      scale: 1.5,//用于渲染的比例

      backgroundColor: null,//画布背景色（如果未在DOM中指定),置null为透明  })

.then((canvas) => {

const base64 = canvas.toDataURL("image/png", 1).slice(22);//已拿到图片的base64,可以自己进行后续处理 }) 

.catch((e) => {

console.log("html2canvas error:", e.message, e);})

}