前言

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

实现：一、body部分

框架我使用的是react。绘画分享采用原生canvas、js实现。所以不用担心vue、小程序、原生H5也是能够适应。
一、构建canvas
下面展示一些 内联代码片。

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

复制代码

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

复制代码

实现：二、JS部分：

shareComponent函数

1. //函数接受一个回调函数，用于绘画完成后，再将canvas转化为png图片格式。
   
2. //canvas移动端无法长按保存，必须传为img才能保存。
   
3. shareComponent = (callback)=>{
   
4.     let suncode = this.state.suncode //微信小程序太阳码
   
5.     let activityName = this.state.activityName //活动标题
   
6.     let backgroundImg = this.state.backgroundImg //背景图
   
7.     let postShareDesc= this.state.postShareDesc //分享描述字段
   
8.     let img = new Image()
   
9.     img.crossOrigin="anonymous"; //关键，处理图片跨域问题！！
   
10.     let _t = this
    
11.     //限制活动标题，最多10个字，超过...省略
    
12.     if(activityName.length>10){
    
13.         activityName=activityName.slice(0,10)+'...'
    
14.       }
    
15.     //由于canvas文字不能自动换行，所以我们这里需要做一个文字换行处理，以及字数的限制，防止超出canvas范围
    
16.     let arrDescribe = []
    
17.     let maxLeng = postShareDesc.length/20 //分享描述每行20字，最多8行
    
18.     if(maxLeng=>8){
    
19.         maxLeng = 8 //最多8行
    
20.     }
    
21.     //postShareDesc为分享描述字段
    
22.    
    
23.     for(let i = 0;i<maxLeng;i++){
    
24.     //将分享描述字段分为若干个20字的行存入arrDescribe数组，且最多8行
    
25.         let str = postShareDesc.slice(i*20,i*20+20)
    
26.         arrDescribe.push(str)
    
27.     }
    
28.     //图片加载完后，将其显示在canvas中，图片必须使用onload方式，否则会导致图片未加载完成就完成绘画
    
29.     //img为整张分享图
    
30.     img.onload = function (){
    
31.       let canvas = _t.refs.canvas //获取canvas元素
    
32.       let ctx = canvas.getContext('2d')
    
33.         //设置背景色，否则背景色会透明
    
34.         ctx.fillStyle='#fff';
    
35.         ctx.fillRect(0,0,1196,1596);
    
36.         ctx.drawImage(img, 0, 0,1200,600);
    
37.   //分享字段描述
    
38.         ctx.font="52px Arial";
    
39.         ctx.fillStyle='#000';
    
40.         //手动换行，80为X坐标，700+index*100为动态计算Y坐标
    
41.         arrDescribe.forEach((item,index)=>{
    
42.             ctx.fillText(item,80,700+index*100);
    
43.         })
    
44.         //分享标题
    
45.         ctx.font="64px Arial";
    
46.         ctx.fillStyle='#000';
    
47.         ctx.fillText(activityName,520,1320);
    
48.   //分享提示
    
49.         ctx.font="48px Arial";
    
50.         ctx.fillStyle='#999';
    
51.         ctx.fillText('长按小程序码查看详情',520,1420);
    
52.   //分享提示
    
53.         ctx.font="48px Arial";
    
54.         ctx.fillStyle='#999';
    
55.         ctx.fillText('分享自[XXXX]',520,1500);
    
56.   //分割线
    
57.         ctx.moveTo(1120,1160);
    
58.         ctx.lineTo(80,1180);
    
59.         ctx.strokeStyle="#E8E8E8"
    
60.         ctx.stroke();
    
61.         //img1为小程序太阳码
    
62.         let img1 = new Image()
    
63.         img1.crossOrigin="anonymous"; //关键，处理太阳码转化为base64格式图片时的跨域问题
    
64.         img1.onload = function(){
    
65.         ctx.drawImage(img1,  80, 1200,340,340)
    
66.         callback(canvas)
    
67. 
    
68.       }
    
69.    太阳码赋值给img1
    
70.       img1.src = suncode
    
71.    //边框
    
72.       ctx.strokeStyle="#f5f5f5";
    
73.       ctx.rect(0,0,1200,1600);
    
74.       ctx.stroke();      
    
75. 
    
76.     }
    
77. //timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。
    
78. //URL时间戳的用法：作用：为了防止浏览器缓存。
    
79. //URL后面添加随机数或时间戳通常用于防止浏览器（客户端）缓存页面。 浏览器缓存是基于URL进行缓存的，
    
80. //如果页面允许缓存，则在缓存时效前再次访问相同的URL，浏览器就不会再次发送请求到服务器端，而是直接从缓存中获取指定资源。
    
81. //而当URL 的末尾追加了随机数或时间戳，就会保证每次都会实际生成新请求且 Web 服务器不会尝试缓存来自服务器的响应。
    
82.     const a = `${backgroundImg}?timeStamp=` + (new Date());
    
83.     img.src = a
    
84. 
    
85.   }
    
86. //绘画完成后，必须转化为img，否则移动端将会无法长按保存
    
87. //必须等绘画完成后，才能够回调。如果直接使用canvas.toDataURL('image/png')转化，会导致出现分享图只有写死的文字，没有请求的图片和文字。会存在异步问题
    
88.   getUrlImg=(canvas)=>{   
    
89.     let dataImg = new Image()   
    
90.     try {
    
91.       dataImg.src = canvas.toDataURL('image/png')
    
92.     } catch (e) {
    
93.       console.log(e);
    
94.     }
    
95.     let urlImg = dataImg.src //urlImg为img路径
    
96.     this.setState({urlImg},()=>{
    
97.     })
    
98.   }

复制代码

实现：三、canvas更换imgs

1. //最后必须将canvas隐藏，再替换为imgs，这样移动端才能长按保存
   
2. //css中.canvasImg添加display：none隐藏画布
   
3. //再使用canvas转化的img，并且将img的宽高设置为25%
   
4. //因为为了提高清晰度，我是采用四倍图再压缩的方式来提高清晰度，所以img需要缩回25%
   
5.     <canvas ref='canvas' width={1200} height={1600} className={styles.canvasImg}/>//display：none
   
6.     //crossOrigin="Anonymous" 处理图片跨域问题
   
7.     <img src={this.state.urlImg} crossOrigin="Anonymous"/>//width：25%。height：25%
   
8.     div className={styles.shareTips}>长按保存，可分享至朋友圈</div>

复制代码

总结与优化

难点在于：
①将canvas转化为base64格式图片，会导致图片跨域问题
②异步问题（图片还未加载，绘画就已经完成）
③背景透明的问题等等
优化：
①清晰度：可以将canvas画成2-4倍图，转化为图片再压缩回50%-25%
②分享图加载速度：小程序二维码太阳码，背景图等页面加载阶段可以先请求，点击分享按钮可以直接绘画，减少请求时间长导致生成绘画慢问题，同时也可以避免二维码、背景图未加载完成，绘画就已经开始，导致画出来的分享图没有背景图、二维码的问题。
到此这篇关于前端Html5如何实现分享截图的示例代码的文章就介绍到这了,更多相关Html5分享截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/768100.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！