项目背景狐友作为搜狐的一款社交产品,在流量传播上有着旺盛的需求点。而在流量传播所需的众多载体之中,海报图片以其简单的分享形式、可定制的视觉体验、自带二维码识别导流等特点,成为了社交产品高频必备的流量载体。 作为狐友的前端开发,生成海报图片就成为了我们工作中持续不断的一个重要需求点。以下是狐友目前的产品前端服务矩阵和海报图片的产品形式。 图 1 狐友产品前端服务矩阵和海报图片的产品形式海报图片实现现状从上图1可以看到,生成海报图片对于狐友产品矩阵来说是一个高频强需求。海报图片作为分享载体,对于各平台的分享流程对接也非常畅通和直观,例如不同于小程序卡片分享只能拘泥于微信平台,网页分享的链接形式不够直观。 而在海报图片这个重要环节,长期的主要技术手段一直是通过各客户端开发在本地设备上进行绘制,但这种方案存在如下的劣势困扰着我们: 各端无法复用:如图2, 如果要全平台都要做图片分享,那么需要各端分别开发,即使生成的图片一模一样,也要开发iOS、Android、H5、小程序一共4遍,整体开发各端无法互相复用。长图大图崩溃:客户端限于设备平台或系统限制,对于长图的生成并不友好,会出现长图因为内存或算力限制无法生成的情况,其中小程序尤为明显,在微信的框架下很容易长图生成造成程序直接崩溃。开发效率较低:客户端本地绘制海报图片,一般需要手写原生代码效率不高。小程序端虽然使用wxml-to-canvas(H5端使用html-to-canvas)来绘制减轻了一些手写命令式绘制代码的负担,但这种标记语言转canvas在实现上也存在缺陷,相比HTML+CSS的表达力还是非常受限。所以,海报图片在代码层面开发效率比较低。为了解决以上问题,我们开始着手调研并实践落地了一套全新的海报图片统一服务,