记一次项目中分享图片的过程

蚊子前端博客
发布于 2019-05-21 00:32
从其他客户端分享到微信朋友圈的步骤是什么呢?又遇到了什么问题呢?

我们的项目主要是在新闻客户端中进行使用,会经常调用客户端提供的jsapi完成各种操作。前些天我们上线了一个非常重要的功能:分享图片

通常分享图片到微信的步骤比较繁琐:先长按保存图片,然后打开微信,点击朋友圈分享,然后在相册里选择刚才保存的图片,最终分享成功。而现在新上线的分享图片功能,能够直接从新闻客户端分享到微信朋友圈,省略了中间保存图片和选择图片的过程。

生成分享图片-蚊子的博客-蚊子的前端博客

在新闻客户端里的页面分享到微信朋友圈,从前端角度可以拆分为以下几个步骤:

  1. 跨域的图片地址转为base64;

  2. 图片对应的链接转为二维码的base64地址;

  3. 使用html2canvas将DOM结构转为base64图片地址;

  4. 使用websocket将base64地址传到后台,然后返回CDN地址;

  5. 调用客户端提供分享图片的jsapi,将4中的CDN地址传进去,呼起分享;

将跨域的图片转为base64是因为在canvas通过toDataURL()方法转换时,跨域的图片是无法转换的,必须将其转为本地图片才可以。对于第4步中将base64转为线上的CDN地址,则是因为客户端jsapi的要求,无法直接传递base64地址。

在使用html2canvas把DOM结构转为图片的过程中,踩过2个坑:1. 无法使用圆角,无法使用透明的背景,最开始打算分享的图片是圆角的,结果生成的图片是圆角的,同时背景里某个地方是镂空的,结果生成的图片里,变成了白的背景色;2. 边框border无法使用虚线,我在某个地方使用border: 2px dashed #888,结果生成的图片里变成了实线。

我们上面分享图片是一个依赖过程,当前步骤须依赖上一个步骤的完成情况,必须上一个步骤成功了,才能执行当前步骤。中间哪个步骤出错了,都无法成功分享图片,那么这里做的兜底操作是分享文章型链接。

COPYJAVASCRIPT

this.$emit('upProgress', 0); // 进度为0,表示分享图片的流程开始 try { let p1 = img2base64byApi(); let p2 = img2base64byApi(); let p3 = qrcode(); await Promise.all([p1, p2, p3]); this.$emit('upProgress', 1); // 进度为1,将跨域的图片全部转为base64 let base64Url = await convertHtml2Canvas('.shareimg'); this.$emit('upProgress', 2); // 进度2,将dom结构转为base64图片 let imgurl = await upImgByWs(base64Url); this.$emit('upProgress', 3); // 进度3,base64图片地址转为CDN地址成功 await showBigImageShareMenu(imgurl); this.$emit('upProgress', 4, imgurl); // 进度4,呼起图片的分享成功 } catch(e) { // 上面任意一个步骤出错,均认为分享图片失败 // 转为分享文章 console.error(e); this.$emit('upProgress', -1); // 进度-1,分享图片失败 }

在实现img2base64byApi, qrcode, convertHtml2Canvas这些方法的过程中,注意对缓存的使用,因为相同的图片地址最终转换后的base64图片也是一样的。因此,将某个图片转换base64成功后,将原图片和转换后的base64图片地址缓存起来,待下次再次调用时,直接返回即可,避免了不必要地重新转换。

COPYJAVASCRIPT

const qrcode = (str: string): Promise<string> => { if (cache.getCache(str)) { return Promise.resolve(cache.getCache(str)); } return new Promise((resolve, reject) => { QRCode.toDataURL(str) .then((code: string) => { cache.setCache(str, code); resolve(code); }) .catch(reject); }); };

总结一下,在实现这个功能中,也是耗费了不少地时间,遇到了一些问题。主要是Promise的合理使用,同时注重缓存的重要性。

标签:
阅读(750) 评论(4)

公众号:

qrcode

微信公众号:前端小茶馆