新手问题 请教一下,在 API 中,保存前端 Canvas 生成的预览图的解决方案

happybai · 2016年06月28日 · 最后由 rainstop 回复于 2016年07月04日 · 3196 次阅读

项目结构:后端 rails-api,前端 react、webpack. 后端统计出一批数据、前端可以根据这些数据生成效果图,现在需要将这批效果图保存到数据库 (carrierwave) 中。 数据不由人工录入,也就是说没有 UI,所以没办法直接传图片信息到后端。 是先产生原数据-->React 前端通过异步 API 生成图片-->要将图片信息保存到数据库 (上传到 s3 等一系列操作) 我现在想到了四种方案

方案一:在 rails 端重新写一遍生成算法,并绘制图片存起来 生成算法可能很复杂,比较麻烦。

方案二:rails 端使用 execjs 之类的,执行 js 并把图片存起来 可能需要将 react 组件抽象成独立可用的。并且因为前端有 react、webpack,不确定 execjs 能否顺利执行。

方案三:react 端进行部分服务端渲染,将这些图片变成可抓取的 HTML,然后 Rails 把数据抓过来 这有点本末倒置的感觉。

方案四:类似 Selenium 之类的,在服务器上模拟浏览器操作,然后把图片保存出来。 需要在服务器上装很多奇奇怪怪的包。

哪种比较合理,或者还有没有更好的方案?感谢各位~

最后解决方案采用了在服务端使用 phantomjs 跑,不过需要改写一下 react 组件。 另外服务端渲染也是可行的

form + ajax 提交

#1 楼 @yingce 数据录入是没有 UI 的,也就没有 form 和 ajax

前端找个 react 插件,前端生成图片,偷偷上传到后端,图片这些很费时间,让前端处理好

canvas toDataUrl 就变成 base64 编码的图片了,传到后端解码保存就可以了

@small_fish__ 多谢回答,但是问题就在于怎么偷偷传到后端?数据是后端统计生成的,不是从 UI 录入的。也就是说后端计算出数据时是没有图片的,后端要想办法通知前端生成图片,在前端走轮询或者开个消息队列?总觉得这样有些小题大做。

@embbnux 多谢回答,同上条回复的解释,没有传到后端的时机。

只存数据,用的时候渲染就行了

@nine 存这些图片的目的就是为了避免多次渲染。要么一页得放个 2、30 个 canvas。

#9 楼 @nine 试过这个包,服务器端渲染是可以的,目前也只能这么处理了。多谢回答~

使用的 phantomjs,搭配这个 gem screencap

需要 登录 后方可回复, 如果你还没有账号请 注册新账号