前端实现网页内容（如某div）变成图片

相关技术

			html2canvas

实现方式

下载地址： html2canvas

引入html2canvas

 <script src="static/js/html2canvas.js"></script>

代码：

 <ul>
      <li v-for="item in picItems"  v-if="picItems.length > 0" >
        <img :src=item style="width: 100%">
      </li>
 </ul>

 for (let i = 0; i < self.items.length; i++) {
          console.log("********"+i)
          // 通过class获取的多个div,此处把多个div生成多个图片
          html2canvas(document.getElementsByClassName("toimg")[i], {
            allowTaint: true, 
            useCORS: true,
            dpi: 300, //将分辨率提高到特定的 DPI（每英寸点数）
            scale: 4 //按比例增加分辨率 (2=双倍).
          }).then(canvas => {
            // let oImg = new Image();
            // oImg.src = canvas.toDataURL("image/jpeg", 1);  // 导出图片
            let url = canvas.toDataURL("image/jpeg", 1);
            console.log('===='+url);
            self.picItems.push(url);
            //以下代码为下载此图片功能
            // $(".imgDiv_img").attr("src", url)
          })
        }