html2canvas踩坑

最新推荐文章于 2025-02-24 17:20:38 发布

疯糖

最新推荐文章于 2025-02-24 17:20:38 发布

阅读量1.1k

点赞数

分类专栏： canvas 文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/Cynthia_Yue27/article/details/115865185

版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用html2canvas将DOM元素转换为图片，并解决了图片错位、抗锯齿及跨域等问题。同时，还提供了在微信环境中处理滚动条及生成大尺寸PDF的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout(() => {
  const canvas = document.createElement('canvas') // 创建一个canvas节点
  const posterBox = this.$refs.posterBoxRef
  const width = posterBox.offsetWidth // 获取dom 宽度
  const height = posterBox.offsetHeight // 获取dom 高度
  const scale = 2 // 定义任意放大倍数 支持小数
  canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
  const rect = posterBox.getBoundingClientRect() // 获取元素相对于视口的
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
  const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft // 获取滚动轴滚动的长度
  html2canvas(posterBox, { // 转换为图片
    x: rect.left, // 绘制的dom元素相对于视口的位置
    y: rect.top,
    scrollX: scrollLeft ,// 滚动的长度
    scrollY: -scrollTop,
    scale: scale, // 添加的scale 参数
    width: width, // dom 原始宽度
    height: height,
    useCORS: true, // 开启跨域
    dpi: window.devicePixelRatio * 2
  }).then(canvas => {
    const context = canvas.getContext('2d')
    // 关闭抗锯齿
    context.mozImageSmoothingEnabled = false
    context.msImageSmoothingEnabled = false
    context.imageSmoothingEnabled = false
    const imgUrl = canvas.toDataURL('image/png', 0.5) // 0.5为质量系数
    this.sHref = imgUrl
  })
}, 1000)

dom数据是从后端获取的，要使用setTimeout()
dom中不能使用省略样式
要设置scrollX和scrollY，避免生成的图片错位（有大量白框）
微信中，固定滚动，用this.$refs获取元素的scroll，如果使用event.target再滚动整个页面高度的时候会出现undefined情况
css中设置了font-family在调用html2canvas方法后会自动刷新
配合jspdf生成pdf的时候，canvas高度超过10000以后一些，会出现生成报错error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData，解决方案，是生成多个pdf文件，发送到后端，让后端合成