记 html2canvas 用法和踩坑

记这次学习是为了在网上和几位网友一起努力的项目-在线简历。完成部分页面的截图生成图片传给服务器，后搬砖在首页生成封面推荐。

特别说明：以下的例子都是在vue3中使用的

引入

在命令行中输入

npm install html2canvas

引入

// App.vue
import html2canvas from "html2canvas";

代码

DOM结构

<template>
    <div ref='picture'>
        <img :src="保存的图片的路径" alt=""> 
    </div> 
    <button @click='saveImage'>点击生成</button>
</template>

js结构

引入 html2canvas
import html2canvas from 'html2canvas';

import {ref,onMounted} from 'vue'
// 获取Dom元素
let picture = ref(null)

// 想要的配置
let opts = {

}
// 具体的方法
const saveImage = () => {
     html2canvas(picture.value,opts).then(function (canvas) {
     // canvas 就是将你获取的节点生成 canvas 元素，方便转成图片
        let imgurl = canvas.toBlob((blob) => {
            //以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
                let filename = `${new Date().getTime()}.jpg`;
            //转换canvas图片数据格式为formData
                let file2 = new File([blob], filename, { type: "image/jpg" });
                   let formData = new FormData();
                    formData.append("file", file2);
                    //将转换为formData的canvas图片 上传到服务器
                   axios.post("后台接口地址", formData).then((res) => {
                 //图片上传成功之后，再调用对应的其他接口，传递指定的参数
                  if (res.data.state == 200) {
                    this.axios
                      .post("后台接口地址", {
                        img: res.data.data,
                        type: 0,
                      })
                      .then((res) => {
                        console.log(res);
                      });
                  }
                });
              });
}

onMounted(() => {
    // 在 vue3 中的ref获取DOM元素后必须在组件挂载完成后使用一次，不然拿不到Dom节点
    console.log(picture.value)
})

上面这些就是 html2canvas 在 vue3 中的代码了，嗷嗷其实仔细看看的话不是很难的嗷嗷。

踩坑

图片的偏移问题

有一个很重要的问题需要提醒一下，当你的dom元素没有用到绝对定位或者fixed定位的时候，不要给元素加上偏移量，这样有可能会导致你的图片发生偏移。

对 css3 支持不好

html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

背景图片模糊

解决方案：使用img标签来实现background-image的效果

图片无法渲染

• 在img标签内加入crossorigin='anonymous'（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）
• 并给html2canvas设置allowTaint: true配置