记一次项目中分享图片的过程-蚊子的前端博客

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

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

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

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

跨域的图片地址转为base64；
图片对应的链接转为二维码的base64地址；
使用html2canvas将DOM结构转为base64图片地址；
使用websocket将base64地址传到后台，然后返回CDN地址；
调用客户端提供分享图片的jsapi，将4中的CDN地址传进去，呼起分享；

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

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

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

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图片地址缓存起来，待下次再次调用时，直接返回即可，避免了不必要地重新转换。

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的合理使用，同时注重缓存的重要性。

推荐订阅源

蚊子的前端博客