[JavaScript知识库] 前端html2Canvas使用总结

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端html2Canvas使用总结 -> 正文阅读

[JavaScript知识库]前端html2Canvas使用总结

注意点：
1.使用background背景图转换会导致图片模糊不清，可以使用img标签展示
2.建议使用npm install --save html2canvas@1.0.0-rc.4 版本新版本在ios13.4上有兼容问题
3.解决ios15.1系统生成时会刷新页面，图片存储异常丢失问题：
给所有被绘制的标签设置字体：比如 font-family: sans-serif;(根标签写就可以了)

// 1.安装依赖
npm install --save html2canvas@1.0.0-rc.4

//2.使用
<template>
  <div>
    <div ref="canvas">html2Canvas</div>
    <button @click="toImg">生成图片</button>
  </div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
  methods: {
    toImg() {
        const opts = {
            scale: 5, //图片清晰度的保证(一般设2）
            useCORS: true, //允许图片跨域，一定要开启
            backgroundColor: "#fff",  //画布背景色
      };
      html2canvas(this.$refs.canvas, opts).then(canvas => {
             let dataURL = canvas.toDataURL(); //将canvas 转为     img标签需要的base64
             console.log(dataURL);

      })
    }
  }
}
</script>