本文记录的是在开源软件不足以满足需求，同时商业软件价格高、定制难的情况下，蚂蚁数据智能前端团队是如何基于开源 Canvas 表格渲染库 AntV S2 实现拥有诸多功能的 React 大数据表格组件。

前言 相信有很多的小伙伴在开发过程中进行绘制图片，或者截图等，今天我把使用的在做一个总结分享给大家，避免入坑。 安装html2canvas 引入html2canvas 在所需要使用的组件上引入html

前端业务，将pdf转换为图片。原生自带标签不太美观，且有兼容性问题，于是选中pdfjs结合canvas来处理

一、常见需求 活动扫码推广 关注公众号扫码推广 产品扫码推广 推荐人扫码推广 日常小程序扫码推广 这些需求很常见，一般也都是通过生成海报（二维码头像背景图）来进行朋友圈推广或者其他推广。 二、代码实现

最终效果 核心代码 获取图片的像素信息 我们创建一个canvas，渲染图片，然后通过 getImageData 方法拿到图片信息。 打印出来的图片信息为： width: 图片宽度 height: 图片

目前业务中突然有需要生成简单的海报页面并且分享到微信及朋友圈的需求，由于基于目前上线时间太短没法实施，小需求被砍掉了，但是闲暇之余我还是思考了一下可行的方案

canvas学习--图片操作 canvas学习--图片操作，canvas学习--图片操作，canvas学习--图片操作

接下来，我会把纯前端实现生成海报全流程给大家讲个明明白白，把我自己遇到的坑，给大家详细分享并讲解，防止大家遇到相似问题，即使遇到问题，也会有一个明确的方向，并且吐血建议大家收藏一波，以备不时之需。(你不能保证以后的需求，没有类似的吧，有的话，记得翻出来看看) 长路漫漫，总得有人…