导出div全部内容为图片

2024年2月25日 156次阅读 来源: 零帝里昂

近期碰上客户需求要求将div中的内容导出为图片并下载保存，经过一段时间的度娘搜索，发现了几个方案：

  1. div转svg，svg转canvas，canvas转图片
  2. html2canvas+canvas2image.js

第一个方案比较复杂，而且一直没有生成成功，每次生成的都是一个空图片，不知道其他的大神是怎么生成的
第二个方案生成成功，但是存在一个缺陷，当div出现滚动条或者div超出分辨率时，导出图片内容不全，而且生成的内容无法指定文件名，总不能让客户每次下载完自己加扩展名吧。开始对这两个js进行分析，经过调试发现

  1. html2canvas中生成画布是按照div的展示大小去生成的，而不是实际大小
  2. canvas2image中采用的是location.href=base64码的方式实现下载的

问题找到之后，修改就轻松了。
代码链接：
https://download.csdn.net/download/uchiha1st/10634144

    原文作者：零帝里昂
    原文地址: https://blog.csdn.net/uchiha1st/article/details/82186932
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞