JS 识别文字和图片内容并且绘制成头像拼接组成的文字和图片

需求图

我现在有一个类似这样的需求,需要用头像图片拼接组成图形以及文字内容。
这个图形和文字是用户上传的一个纯色内容+透明/白色底的图片。

原图


我就直接想到用 canvas 来识别图片内容。但是我并不熟悉 canvas

昨天晚上初步实现了需求,但是我觉得我的路子有一点不对。
直接暴力的按照设置的 size 大小
从左上角不断循环识别到右下角,然后保存有内容的坐标点,
再按照坐标来绘制矩形和图片填充。

因为还要做一些图片移动以及循环重组不同的文字内容。
所以还需要不断得绘制 canvas 里边的内容。
按照现在识别的 4000 多个矩形,如果需要流畅的绘制动画,会不会出现卡顿的情况。

👇 这边是我实现的效果。


初步识别


图片填充之后

阅读 8.4k
5 个回答
  1. 感觉效果不错
  2. 如果能确定文字的话,可以实现缓存坐标数据,减少计算文字的时间
  3. 尽量用 css 动画
  4. canvas 性能不行的话试试 webgl

重计算可以放Service Worker.

不过渲染还是只能在主页面.

照片都是不一样的吗?那我觉得瓶颈会出现在照片上...这好几百张图片,下载起来快不了吧,不过可以考虑雪碧图

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题