html2Canvas 将html转为图片传至后端

最新推荐文章于 2025-05-25 12:50:06 发布

blank_~

最新推荐文章于 2025-05-25 12:50:06 发布

阅读量856

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端 javascript 前端框架

本文链接：https://blog.youkuaiyun.com/weixin_51052286/article/details/125757309

该博客介绍了如何利用html2canvas库将网页元素转化为图片，并将其以PNG格式保存。通过创建一个链接元素并附加到DOM中，可以将图片数据传递给后端进行存储。这个过程对于前端开发者来说是实现动态截图和页面内容保存的一种常见方法。

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

html2Canvas 将html转为图片传至后端

 html2canvas(document.getElementById('flowC').getElementsByClassName('workflow')[0]).then((canvas) => {
  this.urls = canvas.toDataURL('image/png') //画布保存为图片，保存图片的默认格式
                  this.link = document.createElement('a')
                  this.link.href = this.urls
                  document.body.appendChild(this.link)
                  将this.link中的数据传递至后端即可
 })

data中定义urls:[]    link:""