前端H5如何实现分享截图

目录

前言

这篇文章主要是介绍如何使用canvas实现分享截图，
刚开始以为通过canvas绘画分享图片并不难，但实际上在开发的时候还是遇到非常多的坑
例如：
①图片背景为透明
②分享图只有文字没有图片
③图片跨域问题
下面看例子：
分享图片、分享内容描述、标题、二维码都是通过请求接口动态生成

实现：一、body部分

框架我使用的是react。绘画分享采用原生canvas、js实现。所以不用担心vue、小程序、原生H5也是能够适应。

一、构建canvas
下面展示一些 内联代码片。

//ref是react获取canvas元素的方法。也可以使用id，再通过getElementById() 方法获取canvas
//宽高需要转化为而二-四倍图来提高清晰度、否则会导致分享截图模糊，清晰度不足
 <canvas ref='canvas' width={
   1200} height={
   1600} className={
   styles.canvasImg}/>

//点击分享按钮触发this.shareComponent(this.getUrlImg)方法
//非react框架，忽视其余代码。直接触发分享函数
              <div className={
   styles.luckDraw_viewPrizeBtn} onClick={
   ()=>{
   
                     this.setState({
   
                         shareModal:true
                        },()=>{
   
                            this.shareComponent(this.getUrlImg)
                        })}
                 }>分享活动</div>

实现：二、JS部分：

shareComponent函数

//函数接受一个回调函数，用于绘画完成后，再将canvas转化为png图片格式。
//canvas移动端无法长按保存，必须传为img才能保存。
shareComponent = (callback)=>{
   
    let suncode = this.state.suncode //微信小程序太阳码
    let activityName = this.state.activityName //活动标题
    let backgroundImg = this.state.backgroundImg //背景图
    let postShareDesc= this.state.